[React] State 끌어올리기
2022. 10. 19. 20:41
프로그래밍/React
State 끌어올리기 종종 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 필요가 있음 이럴 때는 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋음 이런 일을 어떻게 할 수 있을지 지금부터 살펴보자 이번 섹션에서는 주어진 온도에서 물의 끓는 여부를 추정하는 온도 계산기를 만들어볼 것임 먼저 BoilingVerdict라는 이름의 컴포넌트부터 만들어보자 이 컴포넌트는 섭씨온도를 의미하는 celsius prop를 받아서 이 온도가 물이 끓기에 충분한지 여부를 출력함 function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return The water would not boil...
[React] state 라이프사이클
2022. 10. 11. 20:59
프로그래밍/React
State and Lifecycle React 컴포넌트 안의 state와 생명주기에 대한 개념 소개 엘리먼트 렌더링에서는 UI를 업데이트하는 한 가지 방법만 배웠으며, 렌더링 된 출력값을 변경하기 위해 root.render()를 호출했음 const root = ReactDOM.createRoot(document.getElementById('root')); function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); root.render(element);} setInterval(tick, 1000); CodePen에서 시도해보기 이 섹션에서는 Clock 컴포넌트를 완전히 재사용하고 캡슐화하는 방법을 ..