상태 변수는 읽고 쓸 수 있는 일반적인 자바스크립트 변수처럼 생겼어요. 그러나 상태는 스탭샷에 더 가깝게 행동해요. 상태를 지정하면 이미 갖고 있는 상태 변수를 바꾸는 것이 아니라 리렌더링을 발생시켜요. 이 페이지에서는 - 상태를 정하는 것이 리렌더링을 어떻게 발생시키는지 - 상태는 언제 어떻게 업데이트되는지 - 왜 상태는 설정한 즉시 업데이트 되지 않는지 - 이벤트 핸들러는 상태의 "스냅샷"에 어떻게 접근하는지 를 알아볼 거예요. Setting state triggers renders | 상태를 설정하면 렌더링을 유발해요 클릭과 같은 사용자 이벤트에 맞추어 즉시 사용자 인터페이스가 바뀐다고 생각할 수 있어요. 리액트는 이러한 멘탈 모델과는 조금 다르게 동작해요. 이전 페이지에서 상태를 설정하면 리렌더링..
리액트컴포넌트
데이터 컬렉션에서 여러개의 비슷한 컴포넌트를 보여주고 싶을 때가 있어요. 데이터 배열을 다룰 때 자바스크립트 배열 메서드를 사용할 수 있어요. 이 장에서는 데이터 배열을 컴포넌트 배열로 필터링하고 변환하기 위해 리액트에서 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..
컴포넌트는 리액트의 중요한 콘셉트 중 하나예요. 컴포넌트는 사용자 인터페이스(UI)의 기초이기 때문에 리액트로의 여행을 시작하기 위한 최적의 장소예요. 이 페이지에서는 - 컴포넌트가 무엇인지 - 리액트 어플리케이션에서 컴포넌트가 어떤 역할을 수행하는지 - 첫 리액트 컴포넌트를 어떻게 작성하는지 를 알아볼 거예요. Components: UI building blocks | 컴포넌트: UI를 빌드하는 블록 웹에서 HTML은 이나 와 같이 내장된 태그로 풍부하고 구조화된 코드를 작성할 수 있어요. My First Component Components: UI Building Blocks Defining a Component Using a Component 이 마크업은 아티클인 , 헤딩인 그리고 (요약된) 목록을..
