Styled Components
js로 동작할 수 있는 컴포넌트로 만들 수 있다.
명명을 할 때 보기 Sy를 붙이기도 한다.
useState
렌더링이 잦기 때문에 성능 이슈가 발생할 수 있다.
이것을 해결하기 위해 최적화(React.memo, useCallback, useMemo)가 나왔다.
useEffect
의존성 배열에 있는 값이 변경되면 내부 함수가 동작한다.
없으면 처음 로딩할 때 동작한다.
useRef
Dom요소에 접근할 수 있게 도와준다.
ref의 값은 렌더링이 되지 않는다.
useContext
전역적으로 사용하게 만들어준다.
props drilling을 방지하기 위해 사용한다.
Provider에서 제공한 value가 변겨외면 리렌더링이 발생할 수 있다. useState와 마찬가지로 최적화가 필요하다.
최적화
6-1. React.memo
메모리에 임시적으로 저장하여 props가 변경되지 않는 한 리렌더링 되지 않는다.
컴포넌트가 받아서 사용하는 데이터가 변경되면 리렌더링 되는 것이다.
6-2. useCallback
함수 자체를 기억한다. 리액트가 가상돔을 이용하는 것과 같이 그 때의 시점을 가지고 있다.
6-3. useMemo
무거운 컴포넌트를 사용할 때 사용된다. 무거운 계산을 한번만 실행하고 메모리에 저장해두는 것이다.
Redux
모든 상태를 저장하는 configuration, 각각의 상태를 저장하는 module들(action, state 저장해둠)
useSelector로 configuration(저장 관리소)의 데이터를 불러올 수 있고 useDispatch로 module에 정의 되어있는 action(데이터 가공?)을 실행할 수 있다. 이때, payload라는 key에 데이터를 담아서 모듈에서 활용 가능하다.
Ducks Pattern이라는 정의해둔 패턴이 있다.
Router Dom
페이지 이동을 사용하기 편하게 만들어주는 모듈이다.
Link : 클릭 시 바로 이동하는 로직
useNavigate : 추가로 처리해야 하는 로직이 필요할 때 사용한다.(로그인 했을 때 정보에 따라 변하는 페이지 등등)
overflow: hidden
내에 있으면 잘려서 보인다는 것 등등 작업해보았다. (6/23)dfs/bfs 문제들이 많았지만 이번주에는 구현/수학 문제들도 있어서 다양하게 풀어본 것 같다.
dfs/bfs문제들은 bfs로 풀어보았다.
deque 컬렉션을 이용하고 범위 처리해주는 방법에는 익숙해진 것 같다.
구현과 수학의 경우 사고력이 중요하기 때문에 왜 그렇게 식을 세우는지 좀 이해하는데에 오래걸리고 다시봐도 헷갈리는 부분이 많았다.
과제는 해설강의를 통해 나와 다른점이 어떤 것인지 살펴보는 시간이 필요하고 정처기시험이 다가오기에 이번에는 꼭 통과할 수 있도록 매일매일 공부가 필요하다. 알고리즘의 경우, 정비 기간에 복습해야겠다.