React 공식문서 스터디 23

useEffect (2)

useEffect란? React에서 사용하는 훅 중 하나로, 컴포넌트가 렌더링 될 때 특정 작업을 수행할 수 있게 도와준다.컴포넌트가 화면에 나타날 때나 사라질 때, 또는 특정 값이 변할 때 어떤 동작을 하고 싶다면 useEffect를 사용하면 된다. useEffect  컴포넌트의 최상위 레벨에서 useEffect를 호출하여 Effect를 선언한다.import { useEffect } from 'react';import { createConnection } from './chat.js';function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useEffect(() => { ..

useEffect

useEffect란? React에서 사용하는 훅 중 하나로, 컴포넌트가 렌더링 될 때 특정 작업을 수행할 수 있게 도와준다.컴포넌트가 화면에 나타날 때나 사라질 때, 또는 특정 값이 변할 때 어떤 동작을 하고 싶다면 useEffect를 사용하면 된다. useEffect  컴포넌트의 최상위 레벨에서 useEffect를 호출하여 Effect를 선언한다.import { useEffect } from 'react';import { createConnection } from './chat.js';function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useEffect(() => { ..

useReducer/useContext/useRef 발표자료

useReducer useReducer는 리액트 내장 훅 중 하나로, 상태관리와 관련된 훅 입니다.복잡한 상태 로직을 다룰 때 매우 유용합니다.단순한 상태 변화보다 다양한 액션타입에 따라 상태를 다르게 업데이트 하고 싶을 때 많이 사용됩니다 useReducer은 어떤 상황에서 사용할까?? 컴포넌트 상태 관리 방법에는 여러가지가 있습니다가장 기본적인 방법   >> useStateBut, 상태 로직이 복잡해지면 useState 만으로 관리하기 어려운 경우가 많습니다ex) 여러 개의 관련된 상태를 업데이트 해야 하거나, 상태 업데이트 로직이 복잡한 경우> 이럴 때 useReducer가 useState 보다 더 적합합니다useReducer을 사용하면 상태와 상태 업데이트 로직을 하나의 함수로 일관되게 관리할 수..

useRef (2)

사용법 컴포넌트의 최상위 레벨에서 useRef를 호출하여 하나 이상의 ref를 선언한다.import { useRef } from 'react';function Stopwatch() { const intervalRef = useRef(0);  interval  ID를 저장했다가 나중에 불러와야 하는 경우 ref에 넣을 수 있다.ref 내부의 값을 업데이트 하려면 current 프로퍼티를 수동으로 변경해야 한다.function handleStartClick() { const intervalId = setInterval(() => { // ... }, 1000); intervalRef.current = intervalId;} 나중에 ref에서 해당 interval ID를 읽어 해당 Interval..

useRef

useRef란?React에서 제공하는 훅으로, DOM요소나 컴포넌트의 인스턴스를 직접 참조할 수 있게 해준다 이러한 상황에서 유용하다!!DOM요소에 접근 : 'useRef' 를 사용하여 특정 DOM요소에 접근하고 그 요소의 속성을 직접 변경할 수 있다.값 저장: 렌더링 간에 값에 저장하고 싶을 때 사용된다. 이 값은 컴포넌트가 리렌더링  되더라도 유지된다.포커스 제어 : 폼 요소의 포커스를 설정하거나, 다른 이벤트를 제어할 때 유용하다. useRef(initialValue) 컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언한다.import { useRef } from 'react';function MyComponent() { const intervalRef = useRef(0); con..

useContext(2)

context를 통해 전달된 데이터 업데이트하기 시간이 지남에 따라 데이터를 동적으로 업데이트 하는 방법을 단계별로 풀어서 설명해보자.먼저 Context를 생성하고, Provider를 설정한다. Provider은 Context를 사용하고자 하는 컴포넌트들에게 데이터를 공급하는 역할을 하는데 , 여기서 state 변수를 선언하고 이를 Context의 value로 전달한다.이제 자식 컴포넌트에서 Context를 사용하여 데이터를 가져오고, 필요할 때 데이터를 업데이트 할 수 있다. 마지막으로 최상위 컴포넌트에서 Provider를 사용하여 전체 애플리케이션에 Context를 공급한다. function MyPage() { const [theme, setTheme] = useState('dark'); retu..

useContext

useContext란 ?React 에서 제공하는 훅 (Hook) 중 하나로, React 애플리케이션에서 전역적으로 상태를 관리하고 공유할 수 있도록 해준다. useContext를 사용하면 하위 컴포넌트들이 props를 통해 데이터를 일일이 전달받지 않고도 부모 컴포넌트에서 제공하는 데이터를 직접 접근할 수 있게 된다. Context :  데이터를 여러 컴포넌트들 사이에서 쉽게 공유할 수 있게 해주는 도구. 이전에 createContext로 생성한 context이다. context자체는 정보를 보유하지않으며,컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타낼 뿐이다.예를 들어, 로그인한 사용자 정보나 테마 설정 같은 것을 여러 컴포넌트에서 사용해야 할 때 유용하다. Provider: 데이터를 공급해..

useReducer (2)

Useage 컴포넌트에 reducer 추가하기컴포넌트의 최상위 레벨에서 useReducer를 호출하여 reducer로 state를 관리한다. reducer 함수는 현재상태 (state)와 액션(action)을 받아서 새로운 상태를 반환한다.여기서 increment 와 decrement 두가지 액션을 처리하며, 각각 나이를 1씩 증가 또는 감소시킨다. Mycomponent 함수는 useReducer 훅을 사용하는 React 함수형 컴포넌트 이다.useReducer 훅은 { age:42}로 초기화된 상태와 상태를 업데이트 하는 dispatch 함수를 제공한다.컴포넌트는 현재 나이를 표시하고, 나이를 증가시키는 버튼과 감소시키는 버튼을 렌더링한다. 화면에 표시되는 내용을 업데이트 하려면 사용자가 수행한 작업을..

useReducer 공식문서 스터디(1)

useReduceruseReducer는 컴포넌트 내에서 reducer 함수를 활용하여 상태를 관리할 수 있게 해주는React Hook 이다.useState의 대안으로 사용되며, 복잡한 상태 로직을 다룰때나 다음 상태가 이전 상태에 의존할 때 특히 유용하다. 컴포넌트의 최상위 레벨에서 useReducer를 호출하여 reducer 를 통해 state를 관리해라. 매개변수reducer : 상태가 업데이트 되는 방식을 지정하는 reducer 함수이다. 이 함수는 순수함수여야 하며, state와 액션을 인자로 받아들이고, 다음 상태를 반환해야한다.initialArg : 초기 상태가 계산되는 값이다. 이 값은 모든 유형의 값일 수 있다. 초기 상태가 이 값에서 어떻게 계산되는지는 다음 init 인자에 따라 달라진다..

useState 공식문서 스터디 (4)

첫째로, 렌더링 도중에 상태를 업데이트 할 때는 조건부로 업데이트를 수행해야 한다. 이때 조건은 이전상태 (prevCount)와 새로운 상태 (count)가 다른지를 확인하는 것이다. 이렇게 하면 불필요한 렌더링을 방지할 수 있다. 만약 조건 없이 상태를 업데이트 한다면 렌더링이 무한반복되어 앱이 깨질 수 있다. 둘째, 상태를 업데이트 할 때는 상태를 업데이트 하는 함수인 setPrevCount를 호출해야 한다, 이 함수는 이전 상태(precCount)를 새로운 상태 (count)로 업데이트 한다. 이를 통해 리액트는 상태 변경을 추적하고 필요한 경우에만 컴포넌트를 다시 렌더링 한다. 셋째, 렌더링 도중에는 현재 렌더링 중인 컴포넌트의 상태만을 업데이트 해야 한다. 다른 컴포넌트의 상태를 업데이트하려고..