2022년 5월 27일 리액트 숙련주차 돌입

배운 것

• React
  • 언제 컴포넌트를 만드는게 좋은 것인가?
    html을 반복해야할 때, 큰 페이지들, 자주 변경되는 것들
  • 객체타입 state 변경 시 꼭 복사본을 만들어 변경한다. 그렇지않으면 리액트가 새로 들어올 변수 감지하지 못 하기 때문이다(원본에 사본을 넣어줄 때 두 개의 참조값이 달라야 리액트는 변경을 감지 할 수 있다).  이것을 객체의 불변성을 지킨다 라고 한다.
    객체의 불변성을 지켜야 하는 이유는 2가지가 있다. 앞서말한 것 처럼 원본데이터의 불변성을 지켜주어야만 리액트 컴포넌트에서 변경을 감지 할 수 있다. 그럼으로써 리렌더링이 진행된다. 두 번째는 컴포넌트 업데이트 성능 최적화라고 한다. whatever.
  • [name] : value -> name 값을 가진 키 값: value
    사용 예)하나의 함수로 여러 값(인풋에 name 속성을 이용하여)을 저장하려 할 때 
  • 왜 만들어졌니?
    프로젝트가 커질 수 록 자바스크립트처럼 DOM을 직접 조작하는 것은 코드를 난잡하게 한다. 처리해야 할 이벤트도 많아지고, 접근해야하는 DOM도 많아지고, 관리해야하는 상태도 많아지다보면 업데이트 규칙도 복잡해진다. 때문에 리액트에서는 어떤 상태가 바뀌었을 떄 DOM을 어떻게 업데이트 할 지를 정하는게 아니라 아예 다 날려버리고 새로 렌더링하면 어떨까 라는 아이디어에서 개발을 시작했다. 상태가 없데이트되면 실제 DOM을 그려놓은 가상의 돔(virtual DOM)에 업데이트가 필요한 DOM을 그려줍니다. 그러고나서 실제 업데이트가 일어난 부분만 감지하여 실제 DOM에 렌더링합니다.
  • ref는 DOM조작만을 위해 쓰지 않는다?
    컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리해준다. -> 이거 솔직히 이해안됌
    https://react.vlpt.us/basic/12-variable-with-useRef.html 
  • map 요소마다 key값을 설정하는 이유는?
    key값이 수정 후 업데이트를 제대로 해준다.

 

 

아쉬운 것

• 순공부 시간이 좀 줄었다. 공부 할 떈 아무 생각도 하지맙시다.

 

한줄요약

• 내일 알고리즘 스터디하려면 문제 풀었어야하는데, 죙일 리액트만 하다가 하루가 끝이 났다.