[React] 처음 만난 리액트 - 8~14강

 

처음 만난 리액트 - 0~7강 정리 링크: https://hereishyun.tistory.com/203

---

8강. Handling Events

Event의 정의 및 Event 다루기

Event: 사건. 

- ex. 사용자 버튼 클릭 이벤트

Event Handling: 이벤트 발생 시 처리하는 것

DOM은 클릭 이벤트 처리할 함수를 onclick으로 전달. 함수이름을 문자열로

 

React는 사용방법 조금 다름. onClick이 카멜케이스, 함수 그대로 전달.

 

Event Handler: 이벤트를 처리

= Event Listener: 이벤트가 발생하는 것을 계속 듣고 있는다는 의미

 

bind 중요

 

바인드 번거롭다면 class fields syntax

 

둘다 사용하지 않으려면 arrow function 사용

*이 방식의 문제점: MyButton 컴포넌트가 렌더링될때마다 다른 callback함수가 생성됨. 대부분의 경우에는 문제 없지만, 하위 컴포넌트에 prop으로 넘겨지게 되면 하위 컴포넌트에서 추가적인 렌더링-> 성능 문제. 이 때문에 bind나 class fields syntax를 사용을 권장.

 

함수 컴포넌트에서 이벤트 어떻게 처리?

방법1과 방법2

 

Arguments(=함수에 전달할 데이터=인자) 전달하기

첫째줄: arrow function

둘째줄: bind

 

 

함수 컴포넌트에선

 

참고로 매개변수 순서는 원하는대로 변경해도 상관없음

 

(실습) 클릭 이벤트 처리하기

클래스 컴포넌트인 경우

바인드 사용하기

index.js에 넣어주기

class field syntax 쓰도록 수정해보기

arrow function으로 변경해보기

 

함수 컴포넌트로 바꿔보기

---

9강. Conditional Rendering

Conditional Rendering의 정의와 Inline Conditions

condition: 조건, 상태

Conditional Rendering: 조건부 렌더링(결과에 따라 렌더링을 다르게 함)

- ex. True면 버튼 보여주고, False면 버튼 가린다

isLoggedIn의 값에 따라 두개의 컴포넌트를 선택적으로 리턴 -> 렌더링 결과 달라짐

 

JavaScript의 Truthy와 Falsy

Boolean 자료형 참 / 거짓

조건문에서 사용할 때 결과를 예상하면서 사용해야 해서 알아두기

 

 

Element Variables

컴포넌트로부터 생성된 react element를 렌더링. 변수처럼 저장해서 사용하는 방법.

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

Inline if: && 논리연산자를 사용  (short circuit evaluation)

 

 

 

If-Else의 경우 ? 연산자를 사용

- 문자열 넣는 사례

- element 넣는 사례

 

특정 컴포넌트 렌더링 막으려면? null 리턴

showWarning이 !props.warning이면 return null하고 그렇지 않으면 <div>경고!</div> 리턴하는 경우

(그렇더라도 생명주기에 영향 미치지 x. componentDidUpdate 함수 여전히 호출됨)

 

(실습) 로그인 여부를 나타내는 툴바 만들기

&&와 삼항연산자를 사용했음

---

10강. List and Keys

List와 Key

List: 배열. JS의 변수나 객체들을 묶어 놓은 것. const numbers = [1, 2, 3, 4, 5];

Key: 각 객체나 아이템을 구분할 수 있는 고유한 값. 리스트의 아이템들을 구분하기 위한 고유한 문자열. 여러 개의 Component 렌더링 하기.

map(): 단어 짝지어줌. 배열에 어떤 처리 해서 리턴.

     const doubled = numbers.map((number) => number * 2);

react DOM의 render함수 사용해 렌더링

 

기본적인 List Component

숫자 목록 출력 컴포넌트

- 각 아이템에 고유한 키 없으면 경고 문구 출력될 수 있음

 

List의 Key

Key: 아이템들을 구분하기 위한 고유한 문자열. 같은 List에 있는 Elements 사이에서만 고유한 값이면 됨. 

키값 어떻게?

인덱스로도 가능 -

아이템들의 고유한 ID가 없을 경우에만 사용해야 함

 

map() 함수 안에 있는 elements는 꼭 key가 필요하다!!

 

(실습) 출석부 출력하기

배열 렌더링 위해 map함수를 사용함

각 element에 꼭 id든 뭐든 key 필요

key를 포맷팅된 문자열로 사용할 수도 있음

인덱스를 key로 사용할수도 있음

 

---

11강. Forms

Form과 Controlled Component

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

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

HTML Form: HTML 내부에 각각의 state 존재, 자체적으로 state를 관리

Controlled Components: 값이 리액트의 통제를 받는 Input Form Element. 모든 데이터를 state에서 관리.

 

HTML Form에서 관리하면 JS로 관리하기 쉽지 않은데 오른쪽은 관리 쉽 특히 setState()/useState() 쓰는 부분

사용자의 입력을 직접적으로 제어할 수 있음!

이런 입력제어와 연관

 

다양한 Forms

TextArea 태그: 여러 줄에 걸쳐 긴 텍스트를 입력받기 위한 HTML 태그

- react에서는 value라는 속성 사용해서 넣어준다

 

Select 태그: 드롭다운 목록 보여줌

 

 

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

- <input type="file" />

- Uncontolled Component (값이 리액트의 동작 받지 x)

 

Multiple Inputs

여러개 입력 어떻게 다룸? 여러 개의 state를 선언하여 각각의 입력에 대해 사용

각각의 set함수 사용해서 구현해야

 

Input Null Value

- 제어 컴포넌트에 Value prop을 넣으면 값 수정 못함. 값에 undefined/null 넣어주면 됨. 이렇게 하면 value prop 넣으면서 사용자가 자유롭게 수정하게 할 수 있

 

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

이름 필드, 성별 필드 입력받는

---

12강. Lifting State UP

Shared State

Shared State: 하위 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트의 state를 공유해서 사용하는 것

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

 

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

controlled component

입력 컴포넌트 추출

두개의 입력을 받음

값 동기화

 

 

Lifting state up: 하위 컴포넌트의 state를 공통 상위 컴포넌트로 올림

 

온도값을 props로

사용자가 온도값 변경할 때마다 이 함수로 변경된 값이 상위 컴포넌트로 전달됨

state 제거됨, 전달받은 값만 사용

 

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

---

13강. Composition vs Inheritance

Composition  방법과 Inheritance

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

Containment: 하위 컴포넌트를 포함하는 형태의 합성 방법. sidebar, dialog 같은 box형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없음

- children 이라는 prop을 사용해서 조합

 

children prop을 사용한 FancyBorder 컴포넌트 예시

 

Specialization: 범용적인 개념을 구별이 되게 하는것

리액트에서는 Composition을 사용하여 Specialization을 구현

Inheritance: 상속

다른 컴포넌트로부터 상속을 받아서 새로운 컴포넌트를 만드는 것을 고려해볼 수 있는데, 리액트에서는 상속보다 합성이 좋다

 

결론: 복잡한 컴포넌트를 쪼개서 여러개의 컴포넌트로 만들고, 만든 컴포넌트들을 조합해서 새로운 컴포넌트를 만들자!

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

 

---

14강. Context

Context란?

Context: 컴포넌트의 props를 통한 데이터 전달

props로만 데이터 전달하면 너무 불편

Context 사용하면 곧바로 데이터 전달 가능

여러개의 Component들이 접근해야 하는 데이터

 

 

Context

장점: 간결 깔끔 직관적

단점: Component와 Context 연동될 시 재사용성 떨어짐

-> 다른 level의 많은 컴포넌트가 데이터를 필요로 하는 경우가 아니라면 기존대로 props 전달하는 component composition 방법이 더 적합함

 여러 단계 전달 번거로움

Element Variable: Avatar 컴포넌트를 직접 넘겨줄 수 있음 (props전달x) -> but 모든 경우 적합은 x, 데이터 많아지만 상위레벨 컴포넌트 너무 복잡해짐

하위컴포넌트를 여러개의 변수로 나눠서 전달해라 (대부분의 경우에 적합) 

하나의 데이터에 다양레벨 중첩컴포넌트들이 접근해야함: Context 사용

해당 데이터와 데이터의 변경사항을 하위에 모두 broadcast

 

Context API

React.createContext(기본값);

Context.Provider: 데이터 제공자. value prop 사용함. 하위: consuming component.

재렌더링.

 

Class.contextType: 지금 거의 안 사용

function as a child

 

Context.displayName

 

여러개의 context 원하면 중첩

 

함수 컴포넌트에서 useContext() 훅 사용하는것이 좋다

- 파라미터로 context 객체를 넣어주어야 한다!

 

(실습) Context를 사용하여 테마 변경 기능 만들기