리액트공식문서

컴포넌트는 종종 상호작용의 결과로 스크린에 보여줄 것을 바꾸어야해요. 폼에 입력을 하면 입력창이 업데이트가 되어야하고, 사진 캐러셀에서 "다음"을 누르면 보여지는 이미지가 달라져야하며, "구매하기"를 누르면 장바구니에 상품이 담겨야해요. 컴포넌트는 현재 입력 값, 현재 이미지, 장바구니와 같은 것들을 "기억할" 필요가 있어요. 리액트에서는 이렇게 컴포넌트에 지정된 메모리를 상태라고 해요. 이 페이지에서는 - useState훅을 사용하여 어떻게 상태변수를 추가하는지 - 어떤 쌍의 값을 useState 훅에서 반환하는지 - 한 개 이상의 상태변수를 어떻게 추가하는지 - 상태는 왜 지역적으로 호출되는지 를 알아볼 거예요. When a regular variable isn’t enough | 정규 변수로는 충분..

리액트에서는 JSX에 이벤트 핸들러를 추가할 수 있어요. 이벤트 핸들러는 클릭, 호버, 폼 입력창에 포커싱하기와같은 여러 상호작용에 반응하여 동작하는 사용자 정의 함수예요. 이 페이지에서는 - 이벤트 핸들러를 작성하는 다른 방법들 - 부모 컴포넌트에서 이벤트를 처리하는 로직을 어떻게 전달하는지 - 이벤트를 어떻게 전파하고 어떻게 멈추는지 를 알아볼 거예요. Adding event handlers | 이벤트 핸들러 추가하기 이벤트 핸들러를 추가하려면 먼저 함수를 정의한 후 적절한 JSX 태그에 prop으로 전달해야해요. 아래는 아직 아무것도 하지 않는 버튼이에요. 아래의 세 단계를 통해 사용자가 클릭했을 때 메시지가 보이도록 만들어볼게요. Button 컴포넌트 안에서 handleClick 함수를 선언하세요..

화면의 어떤 항목들은 사용자의 입럭에 반응하여 업데이트 되기도 해요. 예를 들어서 사진 갤러리를 클릭하면 활성 이미지가 바뀌어요. 리액트에서 시간이 지나면서 변하는 데이터를 상태라고 해요. 컴포넌트에 상태를 추가할 수 있고 필요하다면 업데이트할 수도 있어요. 이 챕터에서는 상호작용을 처리하고 상태를 업데이트하고 시간에 따라 다른 결과를 보여주는 컴포넌트를 작성하는 방법을 배울 거예요. 콘텐츠 목록 사용자가 시작한 이벤트를 처리하는 방법 상태를 사용하여 컴포넌트가 정보를 "기억"하도록 만드는 방법 리액트가 두 단계로 UI를 업데이트하는 방법 상태를 바꾼 직후에 바로 업데이트가 되지 않는 이유 여러 상태 업데이트를 대기열에 넣는 방법 상태에서 객체를 업데이트 하는 방법 상태에서 배열를 업데이트 하는 방법 R..

리액트 앱은 여러 컴포넌트를 다른 컴포넌트와 중첩하면서 구체화해요. 리액트가 앱의 컴포넌트 구조를 어떻게 추적할까요? 리액트와 다른 UI 라이브러리는 UI를 트리로 모델링해요. 여러분의 앱을 트리라고 생각하면 컴포넌트 간의 관계를 이해하는데 도움이 돼요. 관계를 이해하면 성능이나 상태 관리와 같은 미래의 개념들을 디버깅하는데 도움이 될 거예요. 이 페이지에서는 - 리액트가 어떻게 컴포넌트 구조를 "보는"지 - 렌더 트리가 무엇이고 어디에 유용한지 - 모듈 의존성 트리가 무엇이고 어디에 유용한지 를 알아볼 거예요. Your UI as a tree | 트리로서의 UI 트리는 아이템과 UI 사이의 관계 모델이며 종종 트리 구조로 표현돼요. 예를 들어, 브라우저는 HTML(DOM)과 CSS(CSSOM)을 모델링..

몇몇 자바스크립트 함수는 순수해요. 순수 함수는 계산만을 수행하고 더 이상 무언가 하지 않아요. 컴포넌트를 순수 함수로만 엄격히 작성하면 코드베이스가 커지면서 전체 클래스에서 발생하는 갑작스런 버그와 예측할 수 없는 행동들을 피할 수 있어요. 이러한 이득을 얻기 위해서는 따라야하는 몇 가지 규칙이 있어요. 이 페이지에서는 - 순수성은 무엇이고 버그를 피하는데 어떻게 도움이 되는지 - 렌더링 단계에서 변경사항을 - 컴포넌트 안에서 실수를 찾기 위해 엄격한 모드를 어떻게 사용하는지 를 알아볼 거예요. Purity: Components as formulas | 순수성 : 공식으로서의 컴포넌트 컴퓨터 과학에서 (그리고 특히 함수형 프로그래밍의 세계에서) 순수한 함수는 아래의 특성을 가진 함수예요. 자신의 일만 ..

데이터 컬렉션에서 여러개의 비슷한 컴포넌트를 보여주고 싶을 때가 있어요. 데이터 배열을 다룰 때 자바스크립트 배열 메서드를 사용할 수 있어요. 이 장에서는 데이터 배열을 컴포넌트 배열로 필터링하고 변환하기 위해 리액트에서 filter()와 map()을 사용헤 볼 거예요. 이 페이지에서는 - 자바스크립트의 map()을 사용하여 컴포넌트에 배열을 어떻게 렌더링하는지 - 자바스크립트의 filter()를 사용하여 특정 컴포넌트만을 어떻게 렌더링하는지 - 리액트 키를 언제 그리고 왜 사용하는지 를 알아볼 거예요. Rendering data from arrays | 배열에서 데이터 렌더링하기 여기 콘텐츠 목록이 있어요. Creola Katherine Johnson: mathematician Mario José Mo..

컴포넌트는 종종 서로 다른 조건에서 서로 다른 요소들을 보여줘야할 필요가 있어요. 리액트에서는 if문이나 &&, 그리고 ? : 연산자와 같은 자바스크립트 문법을 사용하여 JSX를 조건적으로 렌더링할 수 있어요. 이 페이지에서는 - 어떻게 조건에 맞춰 서로 다른 JSX를 반환하는지 - 어떻게 조건적으로 JSX 조각을 포함하거나 제외하는지 - 리액트 코드베이스에서 마주하게 될 흔한 조건부 구문 단축 를 알아볼 거예요. Conditionally returning JSX | 조건부로 JSX 반환하기 여러개의 Item들을 렌더링하는 PackingList 컴포넌트가 있고 이미 쌌는지 아니면 아직 싸지 않았는지를 표시할 수 있다고 가정해볼게요. 몇몇 Item 컴포넌트는 false가 아니라 true로 설정된 isPac..

리액트 컴포넌트는 서로 통신을 하기 위하여 props를 사용해요. 모든 부모 컴포넌트는 자식 컴포넌트에게 props를 내려서 정보를 전달해요. props라고 하면 HTML 속성을 생각하겠지만 props를 통해서는 객체, 배열 그리고 함수를 포함한 그 어떤 자바스크립트 값을 전달할 수 있어요. 이 페이지에서는 - 컴포넌트에 props를 어떻게 전달하는지 - 컴포넌트에서 props를 어떻게 읽는지 - props의 기본값을 어떻게 지정하는지 - JSX를 컴포넌트에 어떻게 전달하는지 - 시간이 지나면 props가 어떻게 변하는지 를 알아볼 거예요. Familiar props | 익숙한 props props는 JSX 태그에 전달하는 정보예요. 예를 들어, className, src, alt, width 그리고 h..

JSX는 자바스크립트 파일 안에서 HTML과 같은 마크업을 사용할 수 있도록 만들어주는 자바스크립트 문법 확장자예요. 컴포넌트를 작성하는 많은 방법들이 있음에도 불구하고 대부분의 리액트 개발자들은 JSX의 간결함을 좋아하고 많은 코드베이스가 이를 사용해요. 이 페이지에서는 - 왜 리액트가 렌더링 로직을 마크업과 함께 사용하는지 - JSX는 HTML과 어떻게 다른지 - JSX로 정보를 어떻게 보여주는지 를 알아볼 거예요. JSX: Putting markup into JavaScript | JSX: 자바스크립트에 마크업 넣기 웹은 HTML, CSS 그리고 자바스크립트로 만들어져요. 수년동안 웹 개발자들은 보통 분리된 파일로 HTML로 콘텐츠를 만들고, CSS로 디자일을 하고, 자바스크립트로 로직을 만들었어요..

컴포넌트의 마법은 재사용성에 있어요. 여러분은 다른 컴포넌트들로 구성된 컴포넌트를 생성할 수 있어요. 그러나 컴포넌트를 중첩하면 할수록 다른 파일로 그들을 분리하는 것이 좋아요. 파일을 분리하는 것은 코드를 스캔하기 쉽고 많은 곳에서 컴포넌트를 재사용하도록 만들어줘요. 이 페이지에서는 - 루트 컴포넌트 파일이 무엇인지 - 컴포넌트를 어떻게 불러오고(임포트하고) 내보내는지(익스포트하는지) - 디폴트(default)와 이름이 있는 불러오기와 내보내기는 각각 언제 사용하는지 - 어떻게 한 파일에서 여러 개의 컴포넌트를 불러오고 내보내는지 - 어떻게 컴포넌트를 여러개의 파일로 분리하는지 를 알아볼 거예요. The root component file | 루트 컴포넌트 파일 여러분의 첫 컴포넌트에서 아래와 같이 렌..