[내일배움캠프 TIL] 27일차

오늘 새로 배운 것

JSX에서는 무조건 1개의 element만 반환할 수 있다

props drilling

중간 컴포넌트를 이용해서 타깃 컴포넌트까지 전달하는 것. 드릴링이라는 용어처럼 중간에 컴포넌트와 관련없는 데이터를 전달전달하는 구조는 재사용성과 앱 성능 측면에서 문제를 일으킬 수 있음

props type

문자열인줄 알았는데 숫자나 다른 값이 들어와서 메서드에 에러를 일으킬 수 있다.
그래서 props 타입이 중요하다.

props.children

props.children은 Layout component를 만들때 자주 쓰인다
그 안에 들어오는 값들은 전부 같은 스타일 주고싶다.
Layout component 하나만 작성해두고 children으로 값을 주입한다.

구조분해할당을 props에 적용하면 props에서 값을 가져올 때 더 간편하면서도 가독성 높일 수 있다.
중괄호 안에 객체의 keyname을 적어주는 것

default props 지정하는 방식

자주 받거나 무조건 받아야하는 props이 있는데 값이 없으면 문제가 되거나 UX가 어색해짐
예 : 로그인 (빈칸 님 안녕하세요)
그럴 때 defaultProps를 이용해 값을 보여줄 수 있음

자식 컴포넌트에서 직접 default props 미리 설정할 수 있다.
부모 컴포넌트에서 props가 내려오기 전까지 보여주고 props 내려오면 이 default props는 사라지고 내려받은 값으로 대체하게 됨

Child.defaultProps={
   name = "아무개"
} 

구조 분해 할당을 이용해 객체에 직접 접근하는 경우 중괄호 안에 name = "기본이름" 이런식으로 쓸 수도 있음

원시데이터와 원시데이터가 아닌 것(객체)의 차이

불변성 - 메모리에 있는 값을 변경할 수 없는 것
원시데이터 / 객체, 배열, 함수
원시데이터는 불변성이 있고 원시데이터가 없는 것은 불변성이 없음

원시데이터와 객체의 차이
원시데이터는 수정했을 때 메모리에 저장된 값 자체를 바꾸는 게 아니라 새로운 메모리 저장 공간에 새로운 값을 저장한다. 그리고 참조하는 위치를 바꿈
원시데이터가 아닌 데이터는 수정했을 때 기존에 저장된 메모리 저장 공간의 값 자체를 바꿔버림. 그래서 불변성이 없다고 말하는 것

리액트에서 불변성의 중요성

react에서 데이터의 불변성을 지키는 것이 중요한 이유
react에서는 화면을 리렌더링 결정할 때 state의 변화를 확인함
state가 변화되면 리렌더링.
변화 확인하는 방법이 state 변화 전후의 메모리 주소를 비교하는 것
만약 리액트에서 원시데이터 아닌 데이터 수정할 때 불변성을 지켜주지 않고 직접 수정해버리면 값은 바뀌지만 메모리 주소는 변함없음
해당값을 바꿨지만 리액트에서는 state가 변했다는 것을 인지하지 못함
그래서 리렌더링이 일어나야함에도 일어나지 않음
그래서 불변성을 지키는 것이 중요

컴포넌트의 key

리액트에서는 map을 사용해 컴포넌트를 반복렌더링할 때 반드시 컴포넌트의 key를 넣어줘야함. 넣지 않으면 오류 발생(모든 child는 unique한 key값을 가져야한다.)
key가 필요한 이유는 리액트에서 컴포넌트 배열을 렌더링할 때 각각 원소에서 변동이 일어나는지 알아내려고 사용하기 때문. 만약 key가 없다면 리액트는 가상DOM을 비교하는 과정에서 배열을 순차적으로 비교하면서 변화 감지한다. key가 있으면 이 값을 통해 어떤 변화가 있는지 더 빠르게 알아낼 수 있게 됨. 즉, key값을 넣어줘야 리액트의 성능이 최적화된다.

브라우저의 렌더링과 리액트 렌더링은 다르다

둘은 독립적인 프로세스
렌더링 완료되고 리액트가 DOM을 업데이트 한 이후에 브라우저는 화면을 그리게 됨(브라우저 렌더링, 또는 페인팅)

하루를 돌아보며...

오늘은 리액트 입문 강의를 완강하고 개인과제 세팅하고 코테 문제 조금 보다가 시간을 보냈는데 뭔가 진도는 별로 나가지 못한 것 같고 집중도 잘 안됐던 것 같다. 써오던 노트북도 오늘따라 팬은 엄청 도는데 뭐 좀 수정하고 리액트 창 띄우는데만 한세월 걸렸다;; 오늘은 남은 시간 새로온 모니터와 맥북 구성부터 일단 좀 하고 내일은 일단 리액트 개인과제를 좀 해결해보고 그 이후에 코테도 마저 좀 풀어야겠다.