UI 구축하기

첫 번째 컴포넌트

리액트 애플리케이션은 컴포넌트라고 불리는 격리된 UI 조각으로 구성됩니다. 리액트 컴포넌트는 마크업을 추가할 수 있는 자바스크립트 함수입니다. 컴포넌트는 버튼과 같이 작을 수도 있고, 전체 페이지와 같이 큰 요소일 수도 있습니다. 다음은 세 개의 Profile 컴포넌트를 렌더링하는 Gallery 컴포넌트의 예시입니다.

컴포넌트 가져오기 및 내보내기

하나의 파일에 여러 컴포넌트를 선언할 수 있지만, 큰 파일은 탐색하기 어려울 수 있습니다. 이를 해결하기 위해 컴포넌트를 자체 파일로 내보내고 다른 파일에서 해당 컴포넌트를 가져올 수 있습니다.

JSX를 사용한 마크업 작성

각 리액트 컴포넌트는 리액트가 브라우저에 렌더링하는 일부 마크업을 포함할 수 있는 자바스크립트 함수입니다. 리액트 컴포넌트는 JSX라는 문법 확장을 사용하여 해당 마크업을 나타냅니다. JSX는 HTML과 매우 유사하지만 조금 더 엄격하며 동적 정보를 표시할 수 있습니다.

기존 HTML 마크업을 리액트 컴포넌트에 붙여넣으면 항상 작동하는 것은 아닙니다. 기존 HTML이 있으면 변환기를 사용하여 문제를 해결할 수 있습니다.

중괄호를 사용한 JSX 내에서의 자바스크립트

JSX를 사용하면 자바스크립트 파일 내에서 HTML과 유사한 마크업을 작성하여 렌더링 로직과 콘텐츠를 동일한 위치에 유지할 수 있습니다. 때로는 마크업 내에서 약간의 자바스크립트 로직을 추가하거나 동적 속성을 참조해야 할 수도 있습니다. 이러한 상황에서는 JSX 내에서 중괄호를 사용하여 자바스크립트에 접근할 수 있습니다.

컴포넌트에 속성 전달하기

리액트 컴포넌트는 서로 통신하기 위해 속성(props)을 사용합니다. 모든 부모 컴포넌트는 자식 컴포넌트에게 속성을 부여하여 정보를 전달할 수 있습니다. 속성은 HTML 속성을 상기시킬 수 있지만, 객체, 배열, 함수, 심지어 JSX와 같은 자바스크립트 값을 통해 전달할 수도 있습니다.

조건부 렌더링

컴포넌트는 종종 다른 조건에 따라 다른 내용을 표시해야 합니다. 리액트에서는 자바스크립트 문법인 if 문, && 연산자, 삼항 연산자 등을 사용하여 조건부로 JSX를 렌더링할 수 있습니다.

리스트 렌더링

데이터 컬렉션에서 여러 개의 유사한 컴포넌트를 표시해야 할 경우가 많습니다. 리액트에서는 자바스크립트의 filter()와 map()을 사용하여 데이터 배열을 컴포넌트 배열로 필터링하고 변환할 수 있습니다.

각 배열 항목마다 키(key)를 지정해야 합니다. 일반적으로 데이터베이스의 ID를 키로 사용하려고 할 것입니다. 키를 사용하면 리액트가 목록의 각 항목의 위치를 변경하더라도 항목의 위치를 추적할 수 있습니다.

컴포넌트의 순수성 유지하기

일부 자바스크립트 함수는 순수합니다. 순수 함수는 다음과 같은 특징을 갖습니다.

• 자신의 일에만 집중합니다. 호출되기 전에 존재한 객체나 변수를 변경하지 않습니다.
• 동일한 입력에는 동일한 결과를 반환합니다. 동일한 입력이 주어지면 순수 함수는 항상 동일한 결과를 반환해야 합니다.

컴포넌트를 순수 함수로만 작성함으로써 코드베이스가 커짐에 따라 발생할 수 있는 혼란스럽고 예측할 수 없는 버그를 피할 수 있습니다. 다음은 비순수 컴포넌트의 예시입니다.

기존 변수를 수정하는 대신 속성을 전달하여 이 컴포넌트를 순수하게 만들 수 있습니다.

다음에 알아 보기