리액트의 기본 요소: 폼, State, 합성과 상속, 컨텍스트

이전 글

리액트의 기본 요소: 이벤트 핸들링, 조건부 렌더링, 리스트와 키

 

교재: 소플의 처음 만난 리액트

 

키워드

폼 State 합성과 상속 컨텍스트

 

Ch11. 폼

폼

사용자로부터 입력을 받기 위해 사용하는 양식

 

리액트의 폼

컴포넌트 내부에서 state를 통해 데이터를 관리한다

 

HTML의 폼

엘리먼트 내부에 각각의 state가 존재한다 

 

제어 컴포넌트

-사용자가 입력한 값에 접근하고 제어할 수 있도록 해 주는 컴포넌트

-그 값이 리액트의 통제를 받는 입력 폼 엘리먼트 

모든 데이터를 state에서 관리

state 값 변경 시 무조건 setState() 함수 사용 

 

<input type="text"> 태그

한 줄로 텍스트를 입력받기 위한 HTML 태그

 

리액트에서는 value라는 attribute로 입력된 값을 관리 

 

textarea 태그

태그를 여러 줄에 걸쳐서 나올 정도로 긴 텍스트를 입력받기 위한 HTML 태그

<textarea>
	안녕하세요, 여기에 이렇게 텍스트가 들어가게 됩니다.
</textarea>

 

select 태그

드롭다운 목록을 보여주기 위한 HTML 태그

*드롭다운 목록은 여러 가지 옵션 중에서 하나를 선택할 수 있는 기능 제공

<select>
	<option value="apple">사과</option>
    <option value="banana">바나나</option>
    <option value="grape">포도</option>
    <option value="watermelon">수박</option>
</select>

 

다중으로 선택되게 하려면 multiple이라는 속성값을 true로 하고, value로 선택된 옵션의 값이 들어 있는 배열을 넣어주면 된다.

<select multiple={true} value{['B', 'C']}>

 

File input 태그

디바이스의 저장 장치로부터 사용자가 하나 또는 여러 개의 파일을 선택할 수 있게 해 주는 HTML 태그

<input type="file" />

 

서버로 파일 업로드하거나 자바스크립트의 File API를 사용해서 파일 다룰 때 사용

읽기 전용이기 때문에 리액트에서는 비제어 컴포넌트가 됨 

 

여러 개의 입력 다루기

여러 개의 state를 선언하여 각각의 입력에 대해 사용

 

Input Null Value 

제어 컴포넌트에 value prop을 정해진 값으로 넣으면 코드를 수정하지 않는 한 입력값을 바꿀 수 없다.

value prop을 넣고 자유롭게 입력할 수 있게 하려면,

값에 undefined 또는 null을 넣어준다.

 

실습: 사용자 정보 입력받기 (332p)

 

 

Ch12. State 끌어올리기

Shared State

공유된 state

 

자식 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트에서 공통적으로 사용하는 경우 

 

 

하위 컴포넌트에서 State 공유하기

물의 끓음 여부를 알려주는 컴포넌트

 

입력 컴포넌트 추출하기

Calculator 컴포넌트 안에 온도를 입력하는 부분을 별도의 컴포넌트로 추출

→ 재사용이 가능한 형태로 컴포넌트를 만들어 사용하는 것이 효율적이기 때문이다 

 

 

온도 변환 함수 작성하기

화씨 → 섭씨 변환 함수, 화씨 → 섭씨 변환 함수

 

Shared State 적용하기

하위 컴포넌트의 state를 공통된 부모 컴포넌트로 올려서 shared state를 적용해야 한다

State 끌어올리기: 하위 컴포넌트의 state를 공통된 부모(상위) 컴포넌트로 끌어올려서 공유하는 방식  

 

실습: 섭씨온도와 화씨온도 표시하기(356p)

 

 

Ch13. 합성 vs. 상속

합성

여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것

 

다양하고 복잡한 컴포넌트를 효율적으로 개발할 수 있다 

 

<합성 기법> 

Containment

하위 컴포넌트를 포함하는 형태의 합성 방법

 

리액트 컴포넌트의 props에 기본적으로 들어 있는 childern 속성을 사용

여러 개의 children 집합이 필요한 경우 별도로 props를 각각 정의해서 사용

 

Specialization

범용적으로 쓸 수 있는 컴포넌트를 만들어 놓고 이를 특수화 시켜서 컴포넌트를 사용하는 합성 방식 

 

범용적인 개념을 구별되게 구체화하는 것 

웰컴다이얼로그는 다이얼로그의 특별한 케이스 

 

Containment와 Specialization을 함께 사용하기 

props.children을 통해 하위 컴포넌트 포함시키기(Containment)

별도의 props를 선언하여 구체화시키기(Specialization) 

 

상속

복잡한 컴포넌트를 쪼개 여러 개의 컴포넌트로 만들고, 만든 컴포넌트들을 조합하여 새로운 컴포넌트로 만든다 

 

리액트에서는 상속보다 합성 사용하는 것이 더 좋다 

 

실습: Card 컴포넌트 만들기(379p)

 

 

Ch14. 컨텍스트

컨텍스트

리액트 컴포넌트들 사이에서 데이터를 기존의 props를 통해 전달하는 방식 대신

컴포넌트 트리를 통해 곧바로 컴포넌트에 전달하는 새로운 방식을 제공한다 

 

 

컨텍스트 사용 시기

여러 컴포넌트에서 계속해서 접근이 일어날 수 있는 데이터들이 있는 경우

 

Provider의 모든 하위 컴포넌트가 얼마나 깊이 위치해 있는지 관계없이 컨텍스트의 데이터를 읽을 수 있다

 

컨텍스트 사용 전 고려할 점

컴포넌트와 컨텍스트가 연동되면 재사용성이 떨어진다

 

다른 레벨이 많은 컴포넌트가 데이터를 필요로 하는 경우가 아니라면, 기존 방식대로 props를 통해 데이터를 전달하는 것이 더 적합하다

 

 

컨텍스트 API

React.createContext()

• 컨텍스트를 생성하기 위한 함수
• 컨텍스트 객체를 리턴
• 기본값으로 undefined를 넣으면 기본값이 사용되지 않는다

 

Context.Provider

• 모든 컨텍스트 객체는 Provider라는 컴포넌트를 갖고 있는다
• Provider 컴포넌트로 하위 컴포넌트들을 감싸주면 모든 하위 컴포넌트들이 해당 컨텍스트의 데이터에 접근할 수 있게 된다
• Provider에는 value라는 prop이 있으며, 이것이 데이터로써 하위에 있는 컴포넌트들에게 전달된다
• 여러개의 Provider컴포넌트를 중첩시켜 사용할 수 있다.

 

Class.contextType

• Provider 하위에 있는 클래스 컴포넌트에서 컨텍스트의 데이터에 접근하기 위해 사용
• 단 하나의 컨텍스트만을 구독할 수 있다

 

Context.Consumer

• 컨텍스트의 데이터를 구독하는 컴포넌트
• 데이터를 소비한다는 뜻에서 consumer 컴포넌트라고도 부른다
• consumer 컴포넌트는 컨텍스트 값의 변화를 지켜보다가 값이 변경되면 재렌더링된다
• 하나의 Provider 컴포넌트는 여러 개의 consumer 컴포넌트와 연결될 수 있다
• 상위 레벨에 매칭되는 Provider가 없을 경우 기본값이 사용된다

 

Context.displayName

• 크롬의 리액트 개발자 도구에서 표시되는 컨텍스트 객체의 이름 

 

여러 개의 컨텍스트 사용하기

Provider 컴포넌트와 Consumer 컴포넌트를 여러 개 중첩해서 사용하면 된다  

 

useContext

함수 컴포넌트에서 컨텍스트를 쉽게 사용할 수 있게 해 주는 훅

 

React.createContext() 함수 호출로 생성된 컨텍스트 객체를 인자로 받아서 현재 컨텍스트의 값을 리턴

컨텍스트이 값이 변경되면 변경된 값과 함께 useContext() 훅을 사용하는 컴포넌트가 재렌더링된다 

 

 

실습: 컨텍스트를 사용하여 테마 변경 기능 만들기(407p)