React Docs Beta

리엑트는 점진적으로 적용할 수 있도록 설계됐습니다. 필요한 만큼 적당히 리엑트를 사용할 수 있습니다. 리엑트의 맛만 보고 싶거나, HTML에 상호작용을 추가하고 싶거나, 리앱트 기반의 복잡한 앱을 시작하고 싶다면, 이 섹션은 당신의 시작에 도움이 될 겁니다.

React는 디자인을 바라보고 앱을 구현하는 것에 대한 당신의 사고를 바꿀 수 있습니다. 이번 튜토리얼에서, React로 검색 가능한 제품 데이터 테이블을 구현하는 사고의 순서에 대해 알려드리도록 하겠습니다.

어떤 Javascript 함수는 순수합니다. 순수 함수는 계산 외에 다른것을 수행하지 않습니다. 컴포넌트를 엄격하게 순수 함수로만 작성하려면, 코드 베이스가 커지면서 나타나는 당혹스러운 버그나 예측하지 못한 동작을 피할 수 있습니다.

컴포넌트가 화면에 출력되기 전에 반드시 React로부터 렌더됩니다. 이 과정의 단계들을 이해한다면 자신의 코드가 어떻게 실행되는지 상상하고 동작을 설명하는데 도움이 될겁니다.

상태(State)의 동작은 스냅샷과 더 유사합니다. 상태(State)를 설정하는 것은 기존에 가지고있던 상태를 변경하는 것이 아니라, 리랜더를 발생시키는 것 입니다.

상태(State) 변수를 설정하면 다른 렌더가 대기열에 들어갑니다. 다음 랜더가 대기열에 들어가기 전에 값에대한 다수의 명령을 수행하고 싶을 수 있습니다. React가 상태 업데이트를 묶는 방법에 대해 이해해 보도록 합시다.

React는 선언적인 방법을 사용해 UI를 관리합니다. UI 각 부분을 직접 조작하는 대신에, 컴퍼넌트가 가질 수 있는 다양한 상태(State)를 기억하고, 유저의 입력에 따라 이를 전환하기만 하면 됩니다. 디자이너가 UI를 생각하는 방식과 유사합니다.

잘 구조화된 상태는 수정과 디버그에 용이한 컴포넌트와, 지속적으로 버그의 원인이 되는 컴포넌트의 차이를 만들어 냅니다. 다음은 상태의 구조를 고민할 때 고려해야 할 팁입니다.