전체 글 (73) 썸네일형 리스트형 React.memo React.memo 란 - 리액트에서 제공하는 고차 컴포넌트 (HOC) - Memoization 기법으로 동작한다. - 컴포넌트가 props 로 동일한 결과를 렌더링하면, React.memo 를 호출하고 결과를 메모이징 하도록 래핑하여 경우에 따라 성능을 향상시킬 수 있다. - React.memo 는 props 의 변화에만 영향을 준다. ( 함수 컴포넌트 안에서 구현한 state 나 context 의 변화에는 재렌더링 ) 고차 컴포넌트? HOC ? 어떤 컴포넌트를 인자로 받아서 최적화된 새로운 컴포넌트를 반환해주는 함수 - 최적화된 새로운 컴포넌트는 렌더링이 될 때마다 prop check 라는 과정을 거쳐서 자신의 props 의 변화를 파악한다. ( props 가 변화가 있다고 인지하면 렌더링을 하고, .. [React Hooks] useReducer useReducer 란 - state(상태) 를 관리하고 업데이트 하는 hook 인 useState 를 대체할 수 있는 Hook - useState 처럼 state를 관리하고 업데이트 할 수 있는 hook useReducer 의 매력 - 한 컴포넌트 내에서 state 를 업데이트 하는 로직 부분을 그 컴포넌트로부터 분리시키는 것을 가능하게 해줌 => state 업데이트 로직을 분리하며 컴포넌트 외부에 작성하는 것을 가능하게 함으로써, 코드의 최적화를 이루게 해줌. useReducer 와 useState 의 사용 차이 useState - 관리해야 할 state 가 1개일 경우 - state가 단순한 숫자, 문자열 또는 Boolean 값일 경우 useReducer - 관리해야 할 state 가 1개 이상, .. [React Hooks] useCallback useCallback 이란 - 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용하는 함수 useMemo 와 차이점 useCallback : memoization된 함수를 반환하는 특징 (함수를 반환함) useMemo : memoization 된 값을 반환해서 직관적인게 특징 (함수를 실행해버림) useCallback 의 구조 useCallback(() => { memoization 할 함수 }, [ 의존성 배열 ]) useCallback 의 예제 useCallback 기본 예제 const calculate = useCallback((num) => { return num + 1 ; }, [item]) 함수를 useCallback 으로 감싸주면 calculate 는 memoization 된 함수를 갖게.. [React Hooks] useMemo useMemo 란 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hooks 중 하나 useMemo 의 Memo 는 Memoization 을 뜻함 memoization이란 - 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법 - 자주 사용되는 값을 캐싱해두어서, 필요할 때마다 다시 계산하는게 아니라, 재사용하는 것 함수형 컴포넌트에 대해 - 함수형 컴포넌트는 렌더링 -> component 함수 호출 -> 모든 내부 변수 초기화 과정을 거친다. UseMemo 를 사용했을 때 함수형 컴포넌트 모습 const calculate = () => { return 10 } function App() { const value = useMemo(() => { .. [React Hooks] useContext & Context 배경지식 부모 컴포넌트에서 자식 컴포넌트로 props 를 통해 데이터를 전달함 하지만 그 깊이가 깊어질수록 거쳐가야 하는 컴포넌트들이 많아지고 코드를 반복적으로 작성해야하고 변수명이 바뀌면 거쳐가는 모든 컴포넌트에서 변수명을 수정해야하는 비효율적인 일들이 발생함. Context 란 - context 를 이용하면 단계마다 일일이 props 를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있음 - 데이터가 필요할 때마다 props 를 통해 전달할 필요가 없이 context 를 이용해 공유함 context 는 꼭 필요할때만! - context 를 사용하면 컴포넌트를 재사용하기 어려워질 수 있음 - prop drilling 을 피하기 위한 목적이라면 component composition ( 컴포넌.. [React Hooks] useRef useRef 란? - 저장공간 또는 DOM 요소에 접근하기 위해 사용되는 react hook Ref 은 reference (즉, 참조를 뜻함) 우리가 자바스크립트를 사용 할 때 DOM 을 선택하기 위해서 querySelector 등의 함수를 사용함 React 를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 필요함 그때 사용하는 것이 useRef useRef 의 기본 구문 const ref = useRef(value) 함수형 컴포넌트에서 useRef 를 부르면, ref 오브젝트를 반환해준다. ref object의 구조 { current : value } 반환된 ref 은 컴포넌트의 전 생의 주기를 통해 유지가 된다. => 컴포넌트가 계속해서 렌더링되어도 언마운트 되기 전까지는 값을 .. [React Hooks] useEffect useEffect 란? - 어떠한 컴포넌트가 Mount (화면에 첫 렌더링) , Update (다시 렌더링), Unmount (화면에서 사라질 때) 에 어떤 특정 작업을 처리할 코드를 실행할 때 사용하는 hook useEffect 기본 구문 1. 인자로 콜백함수만 받는 경우 useEffect(() => { 작업 }} 렌더링이 될 때 마다 실행이 됨 2. 첫번째 인자로 콜백함수를 받고 , 두번째 인자로 배열 (dependency array)을 받는 경우 useEffect(() => { 작업 }, [value]) 화면에 첫 렌더링이 될 때 실행됨, value 의 값이 변경될 때 실행됨 만약 빈 배열을 줄 경우, 화면이 처음 렌더링 될 때만 실행됨 useEffect 기초 예제 1. 계속 렌더링 될 경우 fun.. [React Hooks] useState State 란? 컴포넌트의 동적인 값을 상태 (state) 라고 함 사용자 인터랙션을 통해 컴포넌트의 상태 값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요함 React Hooks 가 나오기 전의 불편한 점 React Hooks 가 나오기 이전에는 상태값을 관리하기 위해 class 기반의 클래스 컴포넌트를 작성해야했다. 클래스 컴포넌트는 간단한 상태 관리 조차도 함수형 컴포넌트에 비해 복잡하여 유지 보수가 매우 힘들었음 UseState 기본 구문 컴포넌트의 상태를 생성 & 업데이트 할 수 있는 도구 (hook) 이다. const [state, setState] = useState(초기값) useState 의 인자에 초기값을 넣어준다 - useState(0) , useState(true) 등등 st.. 이전 1 2 3 4 5 ··· 10 다음
