hook

이번 글에서는 useCallback에 대해서 이야기해보겠습니다. useCallback1) 역할useCallback은 React Component에서 메모이제이션된 Callback function을 생성하기 위한 Hook입니다.주로 불필요한 rendering을 방지하고 성능을 최적화하는 데 사용됩니다.useCallback을 통해 함수의 참조 동일성을 유지해서 자식 component의 불필요한 re-rendering을 막을 수 있습니다.2) 동작 방식useCallback은 메모이제이션된 callback function을 반환하는데,첫 번째 인자로는 메모이제이션할 callback function을 받습니다.두 번째 인자로 의존성 배열(dependency array)을 받습니다. 이 배열 내의 값들이 변경될 때..

이번 글에서는 useRef에 대해서 이야기해보겠습니다. useRef1) 역할 useRef hook은 Component의 생명주기 동안 지속되는 가변값을 저장하는 데 사용됩니다.주로 JSX 요소에 ref 속성으로 연결하여 해당 DOM 요소에 직접 접근할 수 있게 하거나, 이전 상태를 기억하는 등의 용도로 사용됩니다.2) 동작 방식초기화useRef(initialValue)를 호출하여 ref 객체를 생성합니다.반환된 객체는 { current: initialValue } 형태를 가집니다.값 접근 및 수정ref.current를 통해 현재 값에 접근하거나 수정할 수 있습니다.current 속성은 변경 가능(mutable)합니다.Rendering의 독립성 useState hook와 달리 ref.current의 값이 ..

이번 글에서는 useEffect에 대해서 이야기해보겠습니다. useEffect1) 역할 useEffect는 React Component에서 side effects를 수행하기 위한 Hook입니다.side effects는 데이터를 fetch하거나, 수동으로 DOM을 조작하는 등 Component의 주요 렌더링 로직 외에 실행되어야 하는 모든 작업을 의미합니다.useEffect를 통해 함수형 Component에서도 클래스형 Component의 생명주기 메소드와 유사한 기능을 구현할 수 있습니다.2) 동작 방식기본적으로 useEffect는 모든 렌더링 이후에 실행됩니다.첫 번째 인자로 side effects를 수행할 callback function을 받습니다.두 번째 인자로 의존성 배열(dependency ar..

현재 개발 중인 Conti:ed 서비스를 위해 사용된, 그리고 앞으로 사용될 React hook들에 대해 정리해볼까 합니다.이번 글에서는 useState에 대해서 다루고, 이후 계속해서 다른 hook들에 대해서도 작성할 예정입니다. useState1) 역할useState Hook은 Component에서 상태를 선언하고 관리하는 데 사용됩니다.Class였던 Component에서 사용하던 this.state와 this.setState를 함수형 컴포넌트에서도 사용할 수 있게 합니다.2) 동작 방식useState는 초기 상태 값을 인자로 받아 배열을 반환합니다.첫 번째 요소는 현재 상태 값을 나타내는 변수입니다.두 번째 요소는 상태를 갱신할 수 있는 함수입니다.두 번째 요소인 상태 갱신 함수는 새로운 상태 값을..