UI 설명하기

React는 사용자 인터페이스(UI)를 렌더링하기 위한 JavaScript 라이브러리입니다. UI는 버튼, 텍스트, 이미지와 같은 작은 단위로 구성됩니다. React를 사용하면 이를 재사용 가능하고 중첩 가능한컴포넌트로 결합할 수 있습니다. 웹사이트부터 휴대폰 앱까지, 화면에 보이는 모든 것은 컴포넌트로 분해될 수 있습니다. 이 장에서는 React 컴포넌트를 생성하고, 사용자 정의하며, 조건부로 표시하는 방법을 배우게 됩니다.

첫 번째 컴포넌트

React 애플리케이션은 컴포넌트라고 불리는 독립적인 UI 조각들로 구성됩니다. React 컴포넌트는 마크업을 추가할 수 있는 JavaScript 함수입니다. 컴포넌트는 버튼만큼 작을 수도 있고, 전체 페이지만큼 클 수도 있습니다. 다음은 세 개의Profile컴포넌트를 렌더링하는Gallery컴포넌트입니다:

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

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

JSX로 마크업 작성하기

각 React 컴포넌트는 브라우저에 렌더링할 마크업을 포함할 수 있는 JavaScript 함수입니다. React 컴포넌트는 JSX라는 구문 확장을 사용하여 해당 마크업을 표현합니다. JSX는 HTML과 매우 유사해 보이지만, 조금 더 엄격하며 동적 정보를 표시할 수 있습니다.

기존 HTML 마크업을 React 컴포넌트에 붙여넣으면 항상 작동하지는 않습니다:

이와 같은 기존 HTML이 있다면,변환기를 사용하여 수정할 수 있습니다:

중괄호를 사용한 JSX 내 JavaScript

JSX를 사용하면 JavaScript 파일 안에 HTML과 같은 마크업을 작성하여 렌더링 로직과 콘텐츠를 같은 곳에 유지할 수 있습니다. 때로는 해당 마크업 안에 약간의 JavaScript 로직을 추가하거나 동적 속성을 참조하고 싶을 수 있습니다. 이 경우 JSX에서 중괄호를 사용하여 JavaScript로의 "창"을 열 수 있습니다:

컴포넌트에 props 전달하기

React 컴포넌트는 서로 소통하기 위해props를 사용합니다. 모든 부모 컴포넌트는 자식 컴포넌트에 props를 제공하여 일부 정보를 전달할 수 있습니다. props는 HTML 속성을 떠올리게 할 수 있지만, 객체, 배열, 함수, 심지어 JSX까지 포함한 모든 JavaScript 값을 통해 전달할 수 있습니다!

조건부 렌더링

컴포넌트는 종종 다른 조건에 따라 다른 내용을 표시해야 합니다. React에서는 if 문, &&, ? :연산자와 같은 JavaScript 구문을 사용하여 JSX를 조건부로 렌더링할 수 있습니다.

이 예시에서는 JavaScript&&연산자를 사용하여 체크 표시를 조건부로 렌더링합니다:

목록 렌더링

데이터 컬렉션에서 여러 개의 유사한 컴포넌트를 표시하고 싶은 경우가 많습니다. JavaScript의filter() 및 map()을 React와 함께 사용하여 데이터 배열을 필터링하고 컴포넌트 배열로 변환할 수 있습니다.

각 배열 항목에 대해 key를 지정해야 합니다. 일반적으로 데이터베이스의 ID를key로 사용하고 싶을 것입니다. 키를 사용하면 React가 목록이 변경되더라도 각 항목의 위치를 추적할 수 있습니다.

컴포넌트를 순수하게 유지하기

일부 JavaScript 함수는순수합니다.순수 함수는 다음과 같습니다:

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

컴포넌트를 순수 함수로만 엄격하게 작성하면 코드베이스가 커짐에 따라 당황스러운 버그와 예측 불가능한 동작의 전체 범주를 피할 수 있습니다. 다음은 순수하지 않은 컴포넌트의 예입니다:

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

트리로서의 UI

React는 컴포넌트와 모듈 간의 관계를 모델링하기 위해 트리를 사용합니다.

React 렌더 트리는 컴포넌트 간의 부모-자식 관계를 표현한 것입니다.

React 렌더 트리의 예시입니다.

트리의 상단, 즉 루트 컴포넌트 근처에 있는 컴포넌트는 최상위 컴포넌트로 간주됩니다. 자식 컴포넌트가 없는 컴포넌트는 리프 컴포넌트입니다. 컴포넌트의 이러한 분류는 데이터 흐름과 렌더링 성능을 이해하는 데 유용합니다.

JavaScript 모듈 간의 관계를 모델링하는 것은 앱을 이해하는 또 다른 유용한 방법입니다. 우리는 이를 모듈 의존성 트리라고 부릅니다.

모듈 의존성 트리의 예시입니다.

의존성 트리는 클라이언트가 다운로드하고 렌더링할 관련 JavaScript 코드를 모두 번들링하기 위해 빌드 도구에서 자주 사용됩니다. 큰 번들 크기는 React 앱의 사용자 경험을 저하시킵니다. 모듈 의존성 트리를 이해하는 것은 이러한 문제를 디버깅하는 데 도움이 됩니다.

다음은 무엇인가요?

이 장을 페이지별로 읽기 시작하려면첫 번째 컴포넌트로 이동하세요!

또는 이미 이러한 주제에 익숙하시다면,상호작용 추가하기에 대해 읽어보는 것은 어떨까요?