자바스크립트 + 리액트 디자인 패턴

308

자바스크립트 + 리액트 디자인 패턴

■

Hook

은 복잡한 계층 구조를 피하고 코드를 더 명확하게 만듭니다. 일반적으로 클래스에서 고차 컴포넌트나

렌더링

Props

패턴을 사용하면, 리액트 개발자 도구에서 여러 계층에 걸쳐 애플리케이션 구조를 파악해야

합니다.

■

Hook

은 리액트 컴포넌트 전체에 일관성을 부여합니다. 클래스는 함수 바인딩과 호출 컨텍스트를 이해해야

하기 때문에 사람과 기계 모두에게 혼란을 줄 수 있습니다.

12.6

정적 가져오기

import

키워드를 사용하면 다른 모듈에서 내보낸

export

코드를 가져올 수 있습니다. 기본적으

로 정적으로 가져오는 모든 모듈은 초기 번들에 추가됩니다.

ES2015

+의 기본

import

문법

인

import

module

from

'

module

'

을 사용하여 가져오는 모듈은 모두 정적으로 가져온 것

입니다. 이번 절에서는 리액트 환경에서 정적 가져오기

Static

Import

의 사용법을 알아보겠습니다.

예시를 살펴봅시다. 간단한 채팅 애플리케이션에

Chat

컴포넌트가 있다고 가정해 봅시다. 이

컴포넌트는

UserProfile

,

ChatList

,

ChatInput

세 가지 컴포넌트를 정적으로 가져와서

렌더링합니다.

ChatInput

모듈 내에서는 사용자가 이모지를 선택할 때 이모지 선택창을 표

시하기 위해

EmojiPicker ...