props와 children과 상태끌어올리기

Об этом предложении

props와 children — 쉽게 말하면 적는 자리가 다릅니다. 그리고 사실 children도 props의 하나입니다. 별종이 아닙니다. 이미 HTML에서 평생 써오신 구분입니다. <a href="/memo">메모 보기</a> href 가 props고, 메모 보기 가 children입니다. 태그 안쪽에 속성으로 적는 것 이 props, 여는 태그와 닫는 태그 사이에 끼워 넣는 것 이 children입니다. React가 새로 만든 개념이 아니라 HTML의 그 구조를 그대로 가져온 것입니다. <MemoCard title="첫 메모"> {/* title 은 props */} <small>3일 전</small> {/* 이게 children */} </MemoCard> 진짜로 같은 물건이라는 증거는, function MemoCard(props) 로 받으면 props.title 과 props.children 을 똑같은 방식으로 꺼내 쓴다는 점입니다. children 은 이름이 예약돼 있을 뿐입니다. 그럼 뭘 기준으로 나눠 쓰느냐 — 컴포넌트가 그 값을 가지고 무슨 일을 해야 하면 props, 그냥 그 자리에 놓기만 하면 children 입니다. title 은 카드가 "이걸 h3 로 그려라" 하고 쓰는 값이니 props입니다. <small>3일 전</small> 은 카드가 뭔지 알 필요도 없고 그 자리에 놓기만 하면 되니 children입니다. 액자로 생각하시면 편합니다. 테두리 색이나 크기는 액자 설정(props)이고, 액자에 넣는 사진은 내용(children)입니다. 액자는 사진이 뭔지 몰라도 됩니다. 그래서 레이아웃·모달·카드처럼 "감싸는 것"들이 children을 씁니다. 안에 글이 오든 표가 오든 상관없이 똑같이 동작하니까요. 상태 끌어올리기 — 쉽게 말하면 형제끼리는 값을 주고받을 수 없으니, 그 값을 둘의 공통 부모로 옮기는 것 입니다. props는 위에서 아래로만 흐릅니다. 옆으로 가는 길이 없습니다. 그래서 검색창과 목록이 같은 검색어를 봐야 하면 이렇게 됩니다. (안 되는 상태) SearchBar [state: keyword] MemoList [state: keyword] 서로 모른다. 값이 두 개다. (끌어올린 뒤) MemoPage [state: keyword] ← 진짜 값은 여기 하나 ├ SearchBar keyword + onChange ← 바꾸는 쪽 └ MemoList keyword ← 읽는 쪽 값이 아래(자식)에 있던 걸 위(부모)로 올리기 때문에 "끌어올리기"입니다. 핵심은 "불편해서 옮긴다"가 아니라 "값이 두 개면 어긋난다"입니다. 검색창이 자기 keyword 를 들고 목록이 또 자기 keyword 를 들고 있으면, 그건 같은 검색어가 아니라 서로 다른 값 두 개 입니다. 한쪽만 바뀌는 순간 화면이 거짓말을 합니다. 백엔드 하시던 감각으로는 정규화와 똑같습니다. 같은 데이터를 두 테이블에 중복 저장하면 언젠가 어긋나니, 한 곳에만 두고 나머지는 참조하게 만들잖아요. 그 "한 곳"이 공통 부모고, 참조가 props입니다. 진실은 한 군데만 있어야 한다는 것, 그게 전부입니다. 올리는 높이는 그 값을 쓰는 컴포넌트들의 가장 가까운 공통 부모까지만 입니다. 더 위로 올리면 상관없는 컴포넌트까지 같이 다시 그려지고, 덜 올리면 형제가 못 씁니다. 올릴 곳이 너무 멀어서 props를 네다섯 단계씩 내리꽂아야 하면 그때가 Context를 쓸 때입니다.

Детали предложения

Провайдер

velog

Источник

velog-rss

Балл

54.4

Уверенность

49%