전체 글

때때로 두 컴포넌트의 상태를 항상 같이 바꾸어야할 때가 있어요. 그렇게 하려면 양쪽에서 상태를 제거하고 가장 가까운 공통 부모로 이동한 후에 props를 통하여 필요한 상태를 아래로 내려주어야해요. 이는 상태 끌어올리기로 알려져 있고 리액트로 코드를 쓸 때 가장 자주 사용할 것들 중 하나에요. 이 페이지에서는 - 상태를 끌어올려서 컴포넌트 간에 어떻게 공유하는지 - 제어 컴포넌트와 비제어 컴포넌트는 무엇인지 를 알아볼 거예요. Lifting state up by example | 예시를 통해 상태 끌어올리기 이 예시에서 부모 컴포넌트인 Accordion 컴포넌트는 두 개의 다른 Panel 을 렌더링해요. Accordion Panel Panel 각각의 Panel 컴포넌트는 콘텐츠를 볼 수 있는지를 결정하는..

상태를 잘 구조화하는 것은 수정하고 디버깅하기 좋은 컴포넌트와 항상 버그의 원천이 되는 컴포넌트 간의 차이를 만들어요. 상태를 구조화할 때 고려해야할 몇가지 팁을 알려드릴게요. 이 페이지에서는 - 언제 한 개의 상태 변수를 사용하고 언제 여러개의 상태 변수를 사용하는지 - 상태를 정리할 때 무엇을 피해야하는지 - 상태 구조에서 자주 발생하는 이슈를 어떻게 해결하는지 를 알아볼 거예요. Principles for structuring state | 상태 구조화의 원칙 여러개의 상태를 갖고 있는 컴포넌트를 작성할 때 몇개를 사용해야하는지, 그리고 데이터의 모양은 어떻게 되어야하는지를 선택해야해요. 최적이 아닌 상태 구조로도 올바른 프로그램을 작성할 수 있지만 더 나은 선택을 하도록 만들어주는 몇가지 원칙이 ..

리액트는 UI를 조작하는 선언적인 방법을 제공해요. 개별적인 UI 조각들을 직접 조작하는 대신에 컴포넌트가 가질 있는 다양한 상태를 설명하고 이를 사용자 입력에 따라 바꿀 수 있어요. 이는 UI에 대해 디자이너가 생각하는 방식과 유사해요. 이 페이지에서는 - 선언형 UI 프로그래밍이 명령형 UI 프로그래밍과 어떻게 다른지 - 컴포넌트가 가지고 있을 여러 시각적 상태를 어떻게 하나씩 세는지 - 코드에 있는 다른 시각적 상태 사이에서 변화를 어떻게 발생시키는지 를 알아볼 거예요. How declarative UI compares to imperative | 선언형 UI와 명령형 UI의 차이 UI 상호 작용을 디자인할 때, 여러분은 아마도 UI가 사용자 액션에 반응하여 어떻게 변하는지에 대해 생각할 거예요. ..