[WIL]230625

이세령·2023년 6월 25일
0

TIL

목록 보기
37/118

React

  1. Styled Components
    js로 동작할 수 있는 컴포넌트로 만들 수 있다.
    명명을 할 때 보기 Sy를 붙이기도 한다.

  2. useState
    렌더링이 잦기 때문에 성능 이슈가 발생할 수 있다.
    이것을 해결하기 위해 최적화(React.memo, useCallback, useMemo)가 나왔다.

  3. useEffect
    의존성 배열에 있는 값이 변경되면 내부 함수가 동작한다.
    없으면 처음 로딩할 때 동작한다.

  4. useRef
    Dom요소에 접근할 수 있게 도와준다.
    ref의 값은 렌더링이 되지 않는다.

  5. useContext
    전역적으로 사용하게 만들어준다.
    props drilling을 방지하기 위해 사용한다.
    Provider에서 제공한 value가 변겨외면 리렌더링이 발생할 수 있다. useState와 마찬가지로 최적화가 필요하다.

  6. 최적화
    6-1. React.memo
    메모리에 임시적으로 저장하여 props가 변경되지 않는 한 리렌더링 되지 않는다.
    컴포넌트가 받아서 사용하는 데이터가 변경되면 리렌더링 되는 것이다.
    6-2. useCallback
    함수 자체를 기억한다. 리액트가 가상돔을 이용하는 것과 같이 그 때의 시점을 가지고 있다.
    6-3. useMemo
    무거운 컴포넌트를 사용할 때 사용된다. 무거운 계산을 한번만 실행하고 메모리에 저장해두는 것이다.

  7. Redux
    모든 상태를 저장하는 configuration, 각각의 상태를 저장하는 module들(action, state 저장해둠)
    useSelector로 configuration(저장 관리소)의 데이터를 불러올 수 있고 useDispatch로 module에 정의 되어있는 action(데이터 가공?)을 실행할 수 있다. 이때, payload라는 key에 데이터를 담아서 모듈에서 활용 가능하다.
    Ducks Pattern이라는 정의해둔 패턴이 있다.

  8. Router Dom
    페이지 이동을 사용하기 편하게 만들어주는 모듈이다.
    Link : 클릭 시 바로 이동하는 로직
    useNavigate : 추가로 처리해야 하는 로직이 필요할 때 사용한다.(로그인 했을 때 정보에 따라 변하는 페이지 등등)

과제

  1. uuid로 id를 고유한 값으로 설정해줬다.
  2. lv2 과제 redux로 todo의 state를 관리해봤다. (6/22)
  3. lv3 과제 스타일 컴포넌트로 props에 따라 스타일이 변하도록 작업해보았다.(6/23)
  4. 모달 창, select를 만들어보았고 overflow: hidden내에 있으면 잘려서 보인다는 것 등등 작업해보았다. (6/23)

알고리즘

dfs/bfs 문제들이 많았지만 이번주에는 구현/수학 문제들도 있어서 다양하게 풀어본 것 같다.
dfs/bfs문제들은 bfs로 풀어보았다.
deque 컬렉션을 이용하고 범위 처리해주는 방법에는 익숙해진 것 같다.
구현과 수학의 경우 사고력이 중요하기 때문에 왜 그렇게 식을 세우는지 좀 이해하는데에 오래걸리고 다시봐도 헷갈리는 부분이 많았다.

과제는 해설강의를 통해 나와 다른점이 어떤 것인지 살펴보는 시간이 필요하고 정처기시험이 다가오기에 이번에는 꼭 통과할 수 있도록 매일매일 공부가 필요하다. 알고리즘의 경우, 정비 기간에 복습해야겠다.

profile
https://github.com/Hediar?tab=repositories

0개의 댓글