초보 개발자의 성장 일기

컴포넌트를 만들고 나면 성능을 Optimization(최적화)를 해야한다. 컴포넌트 최적화를 위한 대표적인 Hooks useMemo useCallback Memo란? Memoization을 의미하며 동일한 값을 리턴하는 하는 함수를 반복적으로 수행해야 한다면 맨 처음 값을 계산할 때 해당값을 메모리에 저장해서 필요할때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용한다. 자주 필요한 값을 처음 계산할 때 캐싱을 해 두어 값이 필요할 때 캐시에서 꺼내 사용한다. 함수형 컴포넌트 함수로 정의되어있는 컴포넌트를 의미한다. function Component() { const value = calculate(); return {value} } component 함수 호출 시 변수 value는 계속 초기화가 된다...

리액트의 데이터 흐름은 Component Tree형태이고 위에서 아래로 흐른다. 부모와 자식 컴포넌트는 props를 이용해 단계별로 전달한다. 데이터를 전달해야할 자식 컴포넌트가 많을 때는 어떻게 해야 할까? 전역적으로 필요한 공통 컴포넌트가 필요한 순간이 있다. 테마, 언어 등의 데이터가 있다. 하지만 이 데이터를 props를 이용해 단계별로 전달을 하기에는 무리가 있다. 이러한 문제를 해결하기 위해 React에서 Context API를 제공한다. 앱 안에서 전역적으로 사용되는 데이터를 여러 컴포넌트끼리 쉽게 공유할 수 있는 방법을 제공한다. 즉, props로 일일히 데이터를 전달하지 않아도 데이터를 가진 상위 컴포넌트가 어느곳이든 위치해 있는 하위 컴포넌트들에게 전달할 수 있다. Prop Drilli..

함수형 컴포넌트에서 useRef를 부르면 Ref 오브젝트를 반환해준다. const ref = useRef(value) Ref 오브젝트는 { current: value }와 같은 형태이고 수정이 가능하다. Ref에 접근하고 싶을 때 ref[변수명].current로 작성한다. const ref = useRef('one') // { current: 'one' } ref.current = 'two' // { current: 'two' } ref.current = 'three' // { current: 'three' } 원하는 값으로 언제든지 변경이 가능하다. 반환된 ref는 컴포넌트의 전 생애주기에 의해 유지된다. 컴포넌트가 렌더링이 되어도 unmount가 되기 전까지 값을 그대로 유지할 수 있다. 컴포넌트가 ..

리액트 훅을 공부하면서부터 어려운 난관에 부딪혀 이 훅을 제대로 공부하지 않으면 앞으로의 프로젝트와 공부에 더 큰 어려움을 겪을 것 같아 더 자세하게, 왜 사용하는지 어떤 점이 좋은지, 어떻게 사용하는건지 더 자세히 알아보기로 했다. useState로 하는 상태관리에 대해서는 사실 이해가 쉬웠고 사용하고 응용하는데 큰 어려움은 없었다. 하지만 useEffect 부터는 내가 기능을 구현하는 것 뿐만이 아니라 버그도 고치고, 사이드 이펙트가 없는 페이지를 개발해야하니 어디서 어떻게 사용해야하는지 정확히 어려웠다. 컴포넌트의 상태는 세 가지가 있다. Mount: 어떠한 컴포넌트가 생겨나는 시점 Update: 다시 렌더링 되었을 때(상태가 변화했을 때 Unmount: 컴포넌트가 사라질 때 이 상태에서 특정 코드..