분류 전체보기

- 컴포넌트 성능을 최적화 하는 방법 # useCallback 인자로 전달한 콜백함수 그 자체를 Memoization 해주는것 함수가 필요할 때마다 새로 생성하는게 아니라 메모리에서 가져와서 재사용하는 것 렌더링 → component 함수 호출 → 모든 내부 변수 초기화 useCallback 사용 렌더링 → component 함수 호출 → Memoize 된 함수를 재사용 컴포넌트가 처음 렌더링 될때만 함수객체를 초기화 해주고 이후에 렌더링 될 때는 새로운 함수객체를 할당 받는게 아니라 이전에 이미 할당받은 함수객체를 계속 가지고 있으면서 재사용하는것 useCallback (() => { return value; }, [item]) 첫번째 인자 ☞ Memoization 해 줄 콜백함수 두번째 인자 ☞의존성..

# useMemo Memoization : 동일한 값을 리턴하는 함수를 반복적으로 호출 해야할 때 자주 쓰는 값을 맨 처음 계산을 해둬서 그 값이 필요할 때 마다 다시 계산을 하는게 아니라 저장해둔곳에서 꺼내서 사용하는것 함수형 컴포넌트 렌더링 → component 함수 호출 → 모든 내부 변수 초기화 ☞ 이렇게 되면 무거운 일을 할 때 무의미한 반복이 계속 되서 성능이 떨어질 수 있다. useMemo를 사용하면? 렌더링 → component 함수 호출, Memoization → 렌더링 → component 함수 호출, Memoize 된 값을 재사용 const value = useMemo (() => { return calculate(); }, [item]); 첫번째 인자는 콜백함수 ☞ 우리가 Memoi..

리액트는 component Tree 형태로 되어있다. 전역적인 data를 props로 일일히 전달해준다면 복잡해지고 어려워진다. 이때 리액트는 context API를 제공해주는데 전역적으로 사용하는 data들을 여러 컴포넌트들끼리 쉽게 공유할수있는 방법을 제공해준다. 최상위 컴포넌트에서 제공해주면 필요한 컴포넌트에서만 사용할 수 있다. context를 사용하는이유? 가장 아래있는 컴포넌트에서만 data가 필요한데도 불구하고 필요하지 않는 컴포넌트까지 전달이 된다. 이렇게 되면 컴포넌트들이 받는 props도 많아지고 코드도 복잡해진다. 전달하는 과정에서 잘못된 정보를 전달하거나 중간에 수정하면 문제해결이 어려워진다. props 대신 context를 사용하면 최상위 컴포넌트가 선언하면 필요한 컴포넌트에서 받..

# useEffect useEffect(() => {} ) 어떤 컴포넌트가 Mount(화면에 첫 렌더링) → Update(다시렌더링) → Unmount(화면에서 사라질때) 되었을 때 특정작업을 처리할 코드를 실행시켜주고 싶다면 사용 인자로 콜백함수를 받는다. (콜백함수란 다른함수의 인자로 전달된 함수를 의미) 콜백함수 내부에 우리가 원하는 작업을 처리할 코드를 작성해주면 된다. useEffect는 두가지 형태만 알고 있으면 된다 1. useEffect(() => { 작업.... }); 인자로 하나의 콜백함수만 받는 것 컴포넌트가 렌더링 될때마다 매번 콜백함수가 실행됨 컴포넌트가 맨처음 화면에 렌더링될때 한번, 컴포넌트가 다시 렌더링 될때 한번 실행됨 ​ 2. useEffect(() => { 작업....}..

# useRef const ref= useRef(value) {current : value} 함수형 컴포넌트에서 useRef를 부르면 ref 오브젝트를 반환해준다. 우리가 정해준 초기값은 ref안에 current값에 저장된다. 오브젝트는 수정이 가능하기 때문에 언제든 우리가 원하는값으로 변경해줄 수 있다. 반환된 ref는 컴포넌트의 전 생애주기를 통해 유지가 된다. 즉 컴포넌트가 계속 렌더링 되어도 언마운트 되기 전까지는 값을 유지할 수 있다. # useRef 는 언제 사용이 될까? 1. 저장공간 state와 비슷하게 어떤 값을 저장하는 저장공간으로 사용된다. state의 변화 → 렌더링 → 컴포넌트 내부변수들 초기화 ☞ 이런경우 우리가 원치않은 렌더링 때문에 곤란해질때가 있다. ​ state 대신 re..

# React hooks란? 2019.06 정식 출시된 기능 class형 컴포넌트의 길어지는 코드 길이 문제 중복 코드, 가독성 문제 등등을 해결하기 위해 등장 # useState const [state, setState] = useState(초기값); state란? 컴포넌트의 상태 예를들어 현재 time = 5시라면 useState는 이 시간을 간편하게 생성하고 업데이트 시켜준다. state의 생성과 동시에 가져야 할 초기값을 useState에 인자로 넣어주면 state와 setState라는 두가지요소를 배열형태로 return 해준다. 현재 상태값은 state라는 변수에 들어있고 state를 변경시켜주고 싶을 때는 setState라는 변수를 이용해서 변경시켜줄수 있다. state, setState라는 ..