[React] 처음 만난 React(리액트) 강의 정리

element

가장 작은 단위

immutable, 생성 후에 children, attribute를 바꿀 수 없다.

렌더링된 element를 업데이트 하는법.

새롭게 렌더링 하기.

 

components and props

component

구성요소

Component-Based

레고 블록 조립하듯 컴포넌트들을 모아서 개발.

개념적으로 JavaScript function과 비슷하다. 입력을 받아서 출력을 내보냄.

입력은 Props, 출력은 React element.

component: 붕어빵 틀, element: 붕어빵.

props

속성.

Component의 속성.

props: 붕어빵 재료(팥, 슈크림, 고구마). 모양은 같은데 속은 다른 붕어빵.

Read-Only

값을 변경 할 수 없다. 붕어빵 다 구웠는데 속재료를 바꿀 수 없다.

JavaScript 함수의 속성. Pure 함수의 역할. 같은 Props에 대해서는 항상 같은 결과를 보여줄 것.

Component 만들기

Function Component

Class Component

Component 이름은 항상 대문자로 시작해야 한다.

Component 렌더링

Component 합성

Component안에 또 다른 Component를 쓸 수 있다.

Component로 추출하기

큰 컴포넌트를 산산조각내자.

 

State and Lifecycle

State

React component의 상태

React component의 데이터

component에 대한 변경 가능한 데이터

state는 사용자가 정의한다.

state는 JavaScript 객체다.

constructor에서 state정의.

state는 직접 수정 할 수 없다. (하면 안된다.) setState사용해서 수정.

Lifecycle

React component의 생명주기.

Mounting: 출생, Updating: 인생, Unmounting: 사망.

Mounting, Updating은 commit phase가 과거형.

Unmounting은 commit phase가 미래형.

 

Handling Events

사건

버튼 클릭 이벤트

사용자가 버튼을 클릭한 사건

Event Handler == Event Listener

bind사용

 

Conditional Rendering

조건부 렌더링

True이면 버튼을 보여주고, False이면 버튼을 가린다.

Inline Conditions 조건을 코드 안에 집어넣는 것.

if문의 경우 &&연산자를 사용.

if-else문의 경우 ? 연산자 사용.

 

Lists & Keys

배열. 변수나 객체들을 하나의 변수로 묶어놓은 것.

Array를 사용하여 다수의 element를 렌더링 할 수 있다.

열쇠. 모양이 같지 않다. 아이템들을 구분하기 위한 고유한 문자열.

두 List사이에서는 Key가 같아도 상관없음.

Key를 이용하여 ListItem Component만들기

map() 안에 있는 element는 Key가 필요하다. 

Key는 props로 전달되지 않는다. 

JSX안에 map()넣기

 

Forms 

양식

사용자로부터 입력을 받기 위해 사용

Controlled Components 그 값이 리액트의 통제를 받는 input form element이다.

모든 데이터를 state에서 관리. 변경시 setState()사용.

input값의 변화가 모두 handleChange()에서 처리되기 떄문에 원하는 대로 사용자의 입력을 제어.

Textarea tag

select tag

File Input tag - Uncontrolled Components

multiple tag

input null value

 

Lifting State Up

Shared State 

state에 있는 데이터를 여러개의 하위 컴포넌트에서 공통적으로 사용하는 경우.

하위 컴포넌트들이 각자 state에 데이터를 갖고 있을 필요가 없다. 

 

Composition VS Inheritance

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

여러개의 컴포넌트들을 어떻게 조합할 것인가.

Containment 보통 Sidebar나 Dialog 같은 Box형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다.

이런 경우엔 children이라는 prop을 사용해서 조합.

Specialization

전문화, 특수화

WelcomDialog는 Dialog의 특별한 케이스이다.

상속을 사용하여 Specialization을 구현.

하지만 React에서는 Composition을 사용해서 Specialization을 구현.

Containment와 Specialization을 같이 사용하기.

Inheritance 상속.

다른 컴포넌트로부터 상속을 받아서 새로운 컴포넌트를 만드는 것.

상속은 리액트에서 사용할 필요가 없다.