때때로 두 컴포넌트의 상태를 항상 같이 바꾸어야할 때가 있어요. 그렇게 하려면 양쪽에서 상태를 제거하고 가장 가까운 공통 부모로 이동한 후에 props를 통하여 필요한 상태를 아래로 내려주어야해요. 이는 상태 끌어올리기로 알려져 있고 리액트로 코드를 쓸 때 가장 자주 사용할 것들 중 하나에요. 이 페이지에서는 - 상태를 끌어올려서 컴포넌트 간에 어떻게 공유하는지 - 제어 컴포넌트와 비제어 컴포넌트는 무엇인지 를 알아볼 거예요. Lifting state up by example | 예시를 통해 상태 끌어올리기 이 예시에서 부모 컴포넌트인 Accordion 컴포넌트는 두 개의 다른 Panel 을 렌더링해요. Accordion Panel Panel 각각의 Panel 컴포넌트는 콘텐츠를 볼 수 있는지를 결정하는..
리액트 공식문서 | React Docs
상태를 잘 구조화하는 것은 수정하고 디버깅하기 좋은 컴포넌트와 항상 버그의 원천이 되는 컴포넌트 간의 차이를 만들어요. 상태를 구조화할 때 고려해야할 몇가지 팁을 알려드릴게요. 이 페이지에서는 - 언제 한 개의 상태 변수를 사용하고 언제 여러개의 상태 변수를 사용하는지 - 상태를 정리할 때 무엇을 피해야하는지 - 상태 구조에서 자주 발생하는 이슈를 어떻게 해결하는지 를 알아볼 거예요. Principles for structuring state | 상태 구조화의 원칙 여러개의 상태를 갖고 있는 컴포넌트를 작성할 때 몇개를 사용해야하는지, 그리고 데이터의 모양은 어떻게 되어야하는지를 선택해야해요. 최적이 아닌 상태 구조로도 올바른 프로그램을 작성할 수 있지만 더 나은 선택을 하도록 만들어주는 몇가지 원칙이 ..
리액트는 UI를 조작하는 선언적인 방법을 제공해요. 개별적인 UI 조각들을 직접 조작하는 대신에 컴포넌트가 가질 있는 다양한 상태를 설명하고 이를 사용자 입력에 따라 바꿀 수 있어요. 이는 UI에 대해 디자이너가 생각하는 방식과 유사해요. 이 페이지에서는 - 선언형 UI 프로그래밍이 명령형 UI 프로그래밍과 어떻게 다른지 - 컴포넌트가 가지고 있을 여러 시각적 상태를 어떻게 하나씩 세는지 - 코드에 있는 다른 시각적 상태 사이에서 변화를 어떻게 발생시키는지 를 알아볼 거예요. How declarative UI compares to imperative | 선언형 UI와 명령형 UI의 차이 UI 상호 작용을 디자인할 때, 여러분은 아마도 UI가 사용자 액션에 반응하여 어떻게 변하는지에 대해 생각할 거예요. ..
어플리케이션이 커질수록, 상태가 어떻게 정리되고 컴포넌트간에 어떻게 데이터가 흐르는지에 대해 더욱 의도적으로 생각하면 도움이 돼요. 불필요하고 중복된 상태는 버그를 발생시켜요. 이번 챕터에서는 어떻게 상태를 작 구조화하고 어떻게 상태의 업데이트 로직을 지속가능하게 유지하는지 그리고 거리가 먼 컴포넌트 간에 상태를 어떻게 공유하는지를 알아볼 거예요. 콘텐츠 목록 상태 변화 측면에서 UI 변화를 생각하는 방법 상태를 잘 구조화 시키는 방법 컴포넌트 간 상태를 공유하기 위해 "상태를 끌어올리는" 방법 상태가 보존되는지 혹은 삭제되는지를 조정하는 방법 복잡한 상태 로직을 함수에 통합하는 방법 "prop drilling" 없이 정보를 전달하는 방법 앱이 커지면 상태 관리를 확장하는 방법 Reacting to in..
자바스크립트에서 배열은 변경이 가능하지만 상태 안에 배열을 저장할 때는 불변적인 요소처럼 여겨야해요. 객체와 같이 상태에 저장된 객체를 업데이트할 때는 새로운 배열을 만들거나 기존 배열의 복사본을 만들고 새로운 배열을 사용하여 상태를 설정해야해요. 이 페이지에서는 - 리액트 상태 안에서 배열에 항목을 어떻게 추가, 제거, 변경하는지 - 배열의 내부에서 객체를 어떻게 업데이트 하는지 - 어떻게 Immer를 사용하여 반복되어 나오는 구문을 줄인 채 객체를 복사하는지 를 알아볼 거예요. Updating arrays without mutation | 변이 없이 배열 업데이트하기 자바 스크립트에서 배열은 객체의 다른 형태에요. 객체와 같이 리액트 상태 안에서의 배열은 읽기 전용으로 여겨야해요. 이는 즉, arr[..
상태는 자바스크립트 값이라면 객체를 포함한 어떤 값이든 저장할 수 있어요. 그러나 리액트 상태 안에서 직접적으로 객체를 수정하면 안돼요. 대신, 새로운 객체를 생성하거나 기존 객체의 복사본을 만들고 해당 복사본을 사용하여 상태를 설정해야해요. 이 페이지에서는 - 리액트 상태 안의 객체를 어떻게 올바르게 업데이트 하는지 - 변이 없이 중첩 객체를 어떻게 업데이트 하는지 - 불변성이 무엇이고 어떻게 불변성을 유지하는지 - 어떻게 Immer를 사용하여 반복되어 나오는 구문을 줄인 채 객체를 복사하는지 를 알아볼 거예요. What's a mutation? | 변이란 무엇인가요? 상태는 모든 자바스크립트 변수를 저장할 수 있어요. const [x, setX] = useState(0); 따라서 숫자, 문자열, 그리..
상태 변수를 설정하는 것은 또 다른 렌더링을 대기열에 넣는 거예요. 그러나 때때로 다음 렌더링을 대기열에 넣기 전에 다양한 연산을 하고 싶을 수도 있어요. 이를 하기 위해서는 리액트가 상태 업데이트를 어떻게 배칭하는지를 이해하면 도움이 될 거예요. 이 페이지에서는 - "배칭"이란 무엇이고 리액트는 여러 상태 업데이트를 수행할 때 이를 어떻게 사용하는지 - 어떻게 동일한 상태변수에 연속적으로 여러 업데이트를 적용하는지 를 알아볼 거예요. React batches state updates | 리액트는 상태 업데이트를 배칭해요 "+3" 버튼을 클릭하면 setNumber(number + 1)이 3번 호출되기 때문에 카운터가 3번 증가한다고 생각할 거예요. 그러나 이전 섹션을 다시 부를때, 각 렌더링의 상태 값을..
상태 변수는 읽고 쓸 수 있는 일반적인 자바스크립트 변수처럼 생겼어요. 그러나 상태는 스탭샷에 더 가깝게 행동해요. 상태를 지정하면 이미 갖고 있는 상태 변수를 바꾸는 것이 아니라 리렌더링을 발생시켜요. 이 페이지에서는 - 상태를 정하는 것이 리렌더링을 어떻게 발생시키는지 - 상태는 언제 어떻게 업데이트되는지 - 왜 상태는 설정한 즉시 업데이트 되지 않는지 - 이벤트 핸들러는 상태의 "스냅샷"에 어떻게 접근하는지 를 알아볼 거예요. Setting state triggers renders | 상태를 설정하면 렌더링을 유발해요 클릭과 같은 사용자 이벤트에 맞추어 즉시 사용자 인터페이스가 바뀐다고 생각할 수 있어요. 리액트는 이러한 멘탈 모델과는 조금 다르게 동작해요. 이전 페이지에서 상태를 설정하면 리렌더링..
컴포넌트가 화면에 보이기 전에는 반드리 리액트로 렌더링이 되어야해요. 이 과정을 단계별로 이해하면 코드가 실행되는 방법을 알고 동작을 설명하는데 도움이 될 거예요. 이 페이지에서는 - 리액트에서 렌더링이란 무엇인지 - 리액트는 컴포넌트를 언제 그리고 왜 렌더링하는지 - 화면에서 컴포넌트를 보여주려면 어떤 단계를 거치는지 - 렌더링이 왜 항상 DOM 업데이트를 발생시키지는 않는지 를 알아볼 거예요. 컴포넌트를 재료를 조합하여 맛있는 요리를 만드는 부엌의 요리사라고 생각해보세요. 이 시나리오에서 리액트는 손님의 주문을 받고 음식을 가져다주는 웨이터예요. UI를 요청하고 제공하는 이 과정은 세 단계를 거쳐요. 렌더링 발생시키기 (손님의 주문을 부엌에 알려주기) 컴포넌트 렌더링하기 (부엌에서 주문 준비하기) D..
컴포넌트는 종종 상호작용의 결과로 스크린에 보여줄 것을 바꾸어야해요. 폼에 입력을 하면 입력창이 업데이트가 되어야하고, 사진 캐러셀에서 "다음"을 누르면 보여지는 이미지가 달라져야하며, "구매하기"를 누르면 장바구니에 상품이 담겨야해요. 컴포넌트는 현재 입력 값, 현재 이미지, 장바구니와 같은 것들을 "기억할" 필요가 있어요. 리액트에서는 이렇게 컴포넌트에 지정된 메모리를 상태라고 해요. 이 페이지에서는 - useState훅을 사용하여 어떻게 상태변수를 추가하는지 - 어떤 쌍의 값을 useState 훅에서 반환하는지 - 한 개 이상의 상태변수를 어떻게 추가하는지 - 상태는 왜 지역적으로 호출되는지 를 알아볼 거예요. When a regular variable isn’t enough | 정규 변수로는 충분..
