리엑트에 대해

그냥차차·2023년 3월 21일
0

내일배움캠프

목록 보기
106/106
post-thumbnail
post-custom-banner

1. 리엑트

ㄱ. useState

  • 컴포넌트의 상태를 관리할 수 있음
  • props로 부모컴포넌트에서 자식컴포넌트로 데이터를 전달해줄수있음

ㄴ. useEffect

  • 렌더링 이후에 실행할 코드를 만들어줌
  • useEffect(감시 대상이 변하면 동작 할 콜백, [감시대상])으로 작동함
  • 렌더링될때마다 실행시키고싶으면 useEffect(() => { console.log("렌더링 될때마다 실행"); });
  • 맨처음 렌더링될때만 한번실행시키려면 useEffect(() => { console.log("맨 처음 렌더링될 때 한 번만 실행"); },[]);
  • 업데이트가 될때마다 실행시키려면 useEffect(() => { console.log("name이라는 값이 업데이트 될 때만 실행"); },[name]);

ㄷ. useRef

  • 컴포넌트나 HTML의 DOM의 요소를 ref로 관리할 수 있다.

ㄹ. useMemo & useCallback

  • 의존성 배열에 적힌 값이 변할 때만 값, 함수를 다시 정의할 수 있다.
  • 주로 렌더링 성능을 최적화해야 하는 상황에 사용한다.
  • 렌더링마다 새롭게 함수가 추가되는 것을 방지하고 감시 대상이 변하지 않는 이상 함수를 새롭게 생성하지 않는다.

2. 리덕스

  • action : action은 상태(state)를 바꾸는 방식이다. 반드시 type필드가 있어야 한다.
  • dispatch : action을 발생시키는 것으로 action 객체를 파라미터로 받는다.
  • reducer : 변화를 일으키는 함수로 action의 결과로 상태를 어떤 식으로 바꿀지 구체적으로 정의하는 부분
  • store : 리덕스를 적용하기 위한 중앙 저장소 이며, 단 한 개만 가질 수 있다. 상태를 읽을 때는 getState() 상태를 바꿀 때는 dispatch()를 호출한다.
  • 상태를 전역적으로 관리하기 때문에 어느 컴포넌트에 상태를 둬야할지 고민할 필요가 없게 한다.
  • 비동기 처리시 redux-saga나 redux-thunk같은 미들웨어가 필수이다.
    -단점 : Redux는 클라이언트 데이터를 관리하기에 적합하지만 서버데이터를 관리하기엔 적합하지않고, Redux로 서버관리를 하려면 Redux-saga/Redux-thunk등 비동기 처리를 위한 라이브러리를 설치해야하고, 불필요한 Action 호출, 캐싱 처리 및 관리 문제 등이 생김 즉 보일러플레이트가 커짐!

3. 리엑트쿼리

  • React Query는 서버 데이터관리를 관리하기에 적합함.
  • 그래서 클라이언트 데이터를 관리할때는 Recoil, Redux 등과 같이 사용함!
  • Redux에 비해 보일러플레이트구조가 단순해지고 onSuccess/onError 핸들링을 간편하게

4. 리코일

  • 초기 세팅이 정말 간편하고 recoil 라이브러리 외에 따로 설치해야 될 것들이 없어서 좋다.
  • atom, selector 기능만 알고있다면 쉽게 구현할 수 있다.
profile
개발작
post-custom-banner

0개의 댓글