리액트 공식문서 읽기

You will learnHow to create and nest componentsHow to add markup and stylesHow to display dataHow to render conditions and listsHow to respond to even

리액트는 보는 디자인과 만드는 앱에 대한 당신의 생각을 바꿀 수 있다. 리액트로 사용자 인터페이스를 구축할 때 먼저 컴포넌트라는 조각으로 분리한다. 그리고 컴포넌트마다 다른 상태를 설명한다. 마지막으로 데이터가 컴포넌트를 통해 흐르도록 구성 요소를 함께 연결한다. 이

웹에서, <h1>, <li>태그와 같이 HTM 빌트인 태그를 사용하면 풍부한 구조화된 문서를 만들 수 있다.이 마크업은 article을 <article>로, 헤딩은 <h1>으로, 축약된 목차를 정렬된 목록으로 <ol>를 사용하여 나타낸다.

컴포넌트의 마법은 재사용성에 있다 : 컴포넌트를 다른 컴포넌트들로 구성하여 만들 수 있다. 하지만 많은 컴포넌트들을 중첩시킬 수록 각각 다른 파일로 분리시키는 게 좋다. 이러면 쉽게 파일을 스캔할 수 있고 더 많은 곳에서 컴포넌트를 재사용할 수 있다.첫번째 컴포넌트에서

JSX는 JavaScript 파일에서 HTML과 유사한 마크업을 작성할 수 있게 해주는 JavaScript용 확장 문법이다. 컴포넌트를 작성하는 다른 방법이 있지만 대부분의 React 개발자는 JSX의 간결함을 선호하고 대부분의 코드베이스에서 이를 사용한다.웹은 HTM

JSX를 사용하면 JavaScript 파일 내에 HTML과 유사한 마크업을 작성하여 렌더링 로직과 컨텐츠를 같은 위치할 수 있다. 경우에 따라 약간의 JavaScript 로직을 추가하거나 해당 마크업 내에서 동적 속성을 참조하고 싶을 수 있다. 이때 JSX에서 중괄호를

리액트는 props를 통해 소통한다. 모든 부모 컴포넌트는 props로 자식 컴포넌트들에게 정보를 전달할 수 있다. Props는 HTML 속성을 상기시킬 수 있지만 개체, 배열 및 함수를 포함하여 이를 통해 모든 JavaScript 값을 전달할 수 있다.Props는 J

컴포넌트에 조건에 따라 다른 것을 표시하고 싶은 경우가 종종있다. 리액트에서는 if 문, && , ?: 와 같은 JavaScript 구문을 사용하여 JSX를 조건부 렌더링을 할 수 있다.패킹되었거나 안되었거나 표시할 수 있는 여러개의 Item 을 렌더링하는 Packin

DESCRIBING THE UI - Rendering Lists Overview 데이터 모음에서 유사한 여러 컴포넌트를 나열하고 싶은 경우가 많다. JavaScript array methods를 사용하여 데이터 배열을 조작할 수 있다. 이 페이지에서는 리액트와 함께

일부 JavaScript 함수는 순수하다. 순수 함수는 계산만 수행하고 그 이상은 수행하지 않는다. 컴포넌트를 순수 함수로만 엄격하게 작성하면 코드베이스가 커짐에 따라 당황스러운 버그와 예측할 수 없는 동작의 전체 클래스를 피할 수 있다. 그러나 이러한 이점을 얻으려면

리액트를 사용하면 JSX에 이벤트 핸들러를 추가할 수 있다. 이벤트 핸들러는 클릭, 마우스 호버, 양식 입력 포커싱 등과 같은 상호작용에 대한 응답으로 트리거되는 자체 함수이다.이벤트 핸들러를 추가하려면 먼저 함수를 정의한 다음 이를 적절한 JSX태그에 props로 전

컴포넌트는 상호 작용의 결과로 화면의 내용을 변경해야 하는 경우가 많다. 양식에 입력하면 입력 필드가 업데이트되고, 이미지 캐러셀에서 ‘다음’을 클릭하면 표시되는 이미지가 변경되고, ‘구매’를 클릭하면 제품이 장바구니에 담기게 된다. 컴포넌트는 현재 입력 값, 현재 이

컴포넌트가 화면에 표시 되기 전에 리액트로 렌더링되어야 한다. 이 프로세스의 단계를 이해하면 코드가 어떻게 실행되고 동작을 설명하는지 생각하는 데 도움된다.컴포넌트가 주방에서 요리사가 되어 재료로 맛있는 요리를 만들고 있다고 상상해봐라. 이 시나리오에서 리액트는 고객의

상태 변수는 읽고 쓸 수 있는 일반 JavaScript 변수처럼 보일 수 있다. 하지만 상태는 스냅샷처럼 동작한다. 이를 설정하면 이미 가지고 있는 상태 변경되지 않고 대신 다시 렌더링이 트리거 된다.클릭과 같은 사용자 이벤트에 대한 응답으로 사용자 인터페이스가 직접

상태 변수를 설정하면 다른 렌더링이 대기열에 추가된다. 그러나 때로는 다음 렌더링을 대기열에 넣기 전에 값에 대해 여러 작업을 수행해야 할 수도 있다. 이렇게 하려면 리액트가 상태를 일관 업데이트하는 방법을 이해하는 것이 도움된다.“+3” 버튼을 클릭하면 setNumb

상태는 객체를 포함한 모든 종류의 JavaScript 값을 보유할 수 있다. 하지만 리액트 상태에 있는 객체를 직접 변경해서는 안된다. 대신, 객체를 업데이트하려면 새 객체를 생성하거나 기존 객체의 본사본을 만든 다음 해당 복사본을 사용하도록 상태를 설정해야 한다.모든

배열은 JavaScript에서 변경 가능하지만 상태에 저장할 때는 변경할 수 없는 것으로 처리해야 한다. 객체와 마찬가지로 상태에 저장된 배열을 업데이트라면 새 배열을 생성(또는 기존 배열의 복사본 만들기)한 다음 새 배열을 사용하도록 상태를 설정해야 한다.JavaSc

리액트는 UI를 조작하는 선언적인 방법을 제공한다. UI의 개별 부분을 직접 조작하는 대신 컴포넌트가 가질 수 있는 다양한 상태를 설명하고 사용자 입력에 응답하여 상태 간에 전환을 한다. 이는 디자이너가 UI에 대해 생각하는 방법과 유사하다.UI 상호작용을 설계할 때

상태를 잘 구조화하면 수정하고 디버그하기 좋은 컴포넌트와 지속적인 버그 소스가 되는 컴포넌트 사이에 차이가 생길 수 있다. 다음은 상태를 구조화할 때 고려해야할 몇 가지 팁이다.일부 상태를 보유하는 컴포넌트를 작성할 때 사용할 상태 변수 수와 해당 데이터의 모양을 선택

때로는 두 컴포넌트의 상태가 항상 함께 변경되기를 원할 수도 있다. 이를 수행하려면 둘 다에서 상태를 제거하고 가장 가까운 공통 상위 항목으로 옮긴 다음 props를 통해 상태를 전달한다. 이는 상태 올리기(lifting state up)라 알려져 있으며, 리액트 코드

여러 이벤트 핸들러에 분산된 상태 업데이트가 많은 컴포넌트는 부담스러울 수 있다. 이러한 경우 컴포넌트 외부에 모든 상태 업데이트 로직을 리듀서라고 하는 단일 함수에 통합할 수 있다.컴포넌트가 복잡해지면 컴포넌트의 상태가 업데이트되는 다양한 방식을 한 눈에 확인하기 더

일반적으로 props를 통해 상위 컴포넌트의 정보를 하위 컴포넌트로 전달한다. 그러나 props를 전달하는 것은 중간에 많은 컴포넌트를 통해 전달해야 하거나 앱의 많은 컴포넌트에 동일한 정보가 필요한 경우 장황하고 불편할 수 있다. 컨텍스트를 사용하면 부모 컴포넌트는

리듀서를 사용하면 컴포넌트의 상태 업데이트 로직을 통합할 수 있다. 컨텍스트를 사용하면 정보를 다른 컴포넌트에 깊이 전달할 수 있다. 리듀서와 컨텍스트를 함께 결합하여 복잡한 화면의 상태를 관리할 수 있다.리듀서 소개의 이 예에서 상태는 리듀서에 의해 관리된다. 리듀서

컴포넌트가 일부 정보를 “기억”하기를 원하지만 해당 정보가 새 렌더링을 트리거하는 것을 원하지 않는 경우 참조를 ref를 사용할 수 있다.리액트에서 useRef 훅을 가져와서 컴포넌트에 참조를 추가할 수 있다.컴포넌트 내에서 useRef 훅을 호출하고 참조하려는 초기