본문 바로가기

Frontend/React2

리액트 useEffect 제대로 이해하고 똑똑하게 사용하기 - useEffect의 정의 useEffect는 매일 사용하는 Hooks 중 하나이고, 동작 방식을 어느 정도 이해하고 있다고 생각하지만 제대로 알고 있다고 말하기에는 마음에 걸리는 것들이 많은 Hook 이기에, 제대로 정리해보고자 한다. 모던 리액트 Deep Dive 에서는 useEffect의 정확한 정의를 아래와 같이 말한다. useEffect는 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 메커니즘이다. 우리가 일반적으로 이야기 하는 useEffect의 특징, 즉 의존성 배열이 변경되면 콜백함수를 실행한다, 의존성 배열이 빈 배열인 경우 컴포넌트가 마운트 될 때 실행되고, useEffect가 반환하는 클린업 함수는 컴포넌트가 언마운트 될 때 실행된다 등의 특징들을 한 문장으로 설명하려면, 결국 컴.. 2024. 4. 3.
리액트 useState 똑똑하게 쓰기 - lazy Initialization (게으른 초기화) 리액트를 사용하는 프론트 개발자라면 수없이 써봤을 useState 훅에 대해 새로운 사실을 하나 알게 되어 포스팅을 해보려한다. useState의 initalState argument useState훅의 initalState argument 즉, 훅을 호출할때 state의 초깃값으로 전달하는 인수로 값 뿐 아니라, 값을 리턴하는 함수를 넣을 수도 있다. //아래와 같이 초깃값으로 값을 넣을 수도 const [ stateValue, setStateValue ] = useState('defaultValue') //아래와 같이 초깃값으로 값을 리턴하는 함수를 넣을 수도 있다 const [ stateValue, setStateValue ] = useState(() => 'defaultValue') 이와 같이 u.. 2024. 3. 27.
반응형