처음 만난 리액트

https://www.inflearn.com/course/처음-만난-리액트

[무료] 처음 만난 리액트(React) - 인프런 | 강의

완전 기초자를 대상으로하는 리액트 강의

 

섹션 0. 준비하기

undefined는 값이 아직 정의되지 않았음

null은 값이 정의되었지만 무엇인지 모른다.

왜 이걸 나눠놨을까?

 

자바스크립트에서 객체는 키와 값의 쌍으로 이루어진 데이터

 

비교연산자와 일치 연산자(Strict equality operators)

일치연산자란 변수의 값 뿐만 아니라 자료형까지 비교하는 비교연산자

비교연산자는 숫자 1과 문자열 1이 같다고 판단한다.

일치연산자( !== or ===) vs 비교연산자( != or == )

---

섹션 1. 리액트 소개

리액트는 라이브러리이고 앵귤러, 뷰는 프레임워크

프레임워크와 라이브러리의 차이란? 프로그램의 흐름에 대한 제어 권한이 있는가 없는가.

라이브러리는 제어 권한이 개발자에게 있다.

프레임워크는 제어 권한이 프레임워크에 있다.

 

리액트의 장점

빠른 업데이트 & 렌더링 -> Virtual DOM

컴포넌트 기반 -> 레고 블록 조립하듯 컴포넌트들을 모아서 개발

재사용성(Reusability) - 개발 기간이 단축됨. 유지 보수가 용이함.

리액트 네이티브

 

리액트의 단점

방대한 학습량 - Virtual DOM, JSX, State, Props

높은 상태관리 복잡도 - 성능 최적화를 위해 상태 관리를 잘 해야 하는데 어렵다. 외부 상태관리 라이브러리를 사용해야 한다.

---

섹션 2. 리액트 시작하기

CRA(Create React App)은 스프링부트 같은 것.

리액트 개발 환경을 기본적으로 생성해주는 명령어

---

섹션 3. JSX

A syntax extension to JavaScript

자바스크립트의 문법을 확장시킨것(JavaScript + XML/HTML)

JSX로 작성된 HTML은 나중에 React.createElement()로 변환되는데 createElement의 실행 결과로 아래와 같은 객체가 생성된다.

이렇게 생성된것을 React Element라고 부른다.

const element = {
	type: 'h1',
    props: {
    	className: 'greeting',
        children: 'Hello, world!'
    }
}

JSX의 장점

간결함

Injection Attack의 방어

JSX에서 중괄호를 사용하면 그 안에는 자바스크립트가 들어간다.

 

---

섹션 4. Rendering Elements

React Element는 DOM Element의 가상 버전

리액트가 React Element를 가지고 DOM Element를 생성해준다.

immutable - 불변성

Element 생성 후에는 props나 state를 바꿀 수 없다.

변경사항을 반영하려면 어떻게 해야 하는가? 새로운 Element를 만들고 갈아끼운다. 바뀐 부분만 갱신한다.

리액트 웹사이트는 반드시 하나의 Root DOM Node가 존재한다. index.html에 들어있다.

---

섹션 5. Components and Props

props는 Read-Only 라는 특성을 가진다.

모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고, 같은 Props에 대해서는 항상 같은 결과를 보여줄것.

모든 리액트 컴포넌트는 순수 함수 처럼 동작해야 한다.

Class Component & Function Component

재사용 가능하다고 판단되면 Component를 쪼개는 것이 좋다.

컴포넌트를 재사용하기 위해서는 컴포넌트를 명확하게 단일 기능을 하도록 구현하는것이 좋다.

컴포넌트에 추가 기능을 부여하고 싶으면 컴포넌트를 한번 감싸서 만들면 된다.

---

섹션 6. State and Lifecycle

라이프사이클 함수는 클래스 컴포넌트에 존재하는 함수인데 요즘은 잘 사용하지 않기 떄문에 참고하면 된다.

물론 Hooks에도 라이프사이클 함수에 대응되는 문법들이 존재하기 때문에 이해하는것은 필요하다.

어떤게 있고, 언제 사용되고, Hooks에서 어떤것에 대응되는지.

 

React Developer Tools를 통해 어떤 컴포넌트가 렌더되고 얼마가 걸렸는지 확인할 수 있다.

---

섹션 7. Hooks

함수 컴포넌트에서 클래스 컴포넌트에서 제공하는 기능들을 사용할 수 있도록 하기 위해 등장한것이 Hooks

왜 이름이 Hook? 갈고리다.

리액트의 state와 생명주기, 최적화 관련 함수등에 갈고리를 걸어 해당 시점에 실행되도록 하는 기능을 추가할 수 있도록 한다.

커스텀 훅을 만들떄는 이름을 use로 시작해야 한다. 신기한 문법...

UI 가 필요없는데 기능을 구현해서 재활용하고 싶은 경우 커스텀 훅을 사용하면 된다.

useEffect는 Side Effect를 수행하기 위한 Hook

리액트에서 Side Effect의 의미는 영향 -> 생명주기 함수의 기능을 제공

의존성 배열에 값이 없으면 생성 시점에 호출

의존성 배열에 값이 있으면 스테이트 변경 시점에 호출

return 부분에 함수를 넘기면 언마운트 시점에 호출됨

 

useMemo - Memoized Value를 리턴하는 Hook

Memoization 최적화를 위한 기능으로 비용이 많이 드는 내용을 저장해놨다가 이전에 호출했던 결과값을 다시 사용하는 것

의존성 배열에 들어있는 변수가 변경됐을때만 다시 갱신한다.

렌더링이 일어나는동안 실행된다.

렌더링이 일어나는동안 실행되면 안되는 작업을 useMemo에 넣으면 안된다.

useEffect, 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 작업 등

의존성 배열을 넣지 않으면 아무런 의미가 없다. 렌더링 할 때 마다 매번 실행됨

 

useCallback

useMemo랑 비슷한 기능을 한다.

의존성 변수가 변경됐을때만 함수를 다시 만들어주는 기능

함수를 컴포넌트 내에 선언했을떄 매번 렌더링이 일어날떄마다 새로 함수가 생성된다.

 

useRef

Reference를 사용하기 위한 훅

레퍼런스란 특정 컴포넌트에 접근할 수 있는 객체

current라는 속성이 있고 현재 참조하고 있는 Element를 가리킨다.

useRef를 사용할떄는 초기값을 null으로 넣어줘야 한다.

초기값을 안넣어주면 undefined가 타입으로 지정되는데 ref를 지정할때 undefined는 받지 않기 때문

 

Callback Ref라는게 있다.

useRef Hook은 내부의 데이터가 변경되었을 때 별도로 알리지 않는다.

useCallback을 ref로 지정해서 갱신 시점의 current를 받아올 수 있다.

useCallback을 ref로 지정하면 의존성 변수가 변경되었을 때 해당 함수가 다시 호출된다.

첫번째 파라미터가 current 값이 된다.

 

Hook은 무조건 최상위 레벨에서만 호출해야 한다. -> 조건문, 반복문, 함수의 내부는 안됨

렌더링 시 마다 매번 같은 순서로 Hooks가 호출되어야 한다.

 

Hook의 규칙과 관련된 플러그인 - eslint-plugin-react-hooks

훅의 규칙을 따르는지 아닌지 분석해준다.

이거 깔려있는거 같다.

 

어떤 경우에 Custom Hook을 만드는가?

반복되는 Hooks 형태를 만들어서 재사용하기 위함

Custom Hook 내부에서

- useState나 useEffect를 사용하여 상태 관리 기능을 한곳에 모아둘 수 있음

- setter 함수를 사용한 함수를 만들어서 기능을 제공할 수도 있다.

 

Hook 들 사이에서 데이터를 공유하고 싶은 경우

state를 Custom Hook의 Props로 전달하여 state의 변화에 따라 Custom Hook도 다시 생성됨

리렌더링의 대상이 된다는 것.

---

섹션 8. Handling Events

bind를 사용하는 부분을 잘 보자.

bind를 하는 이유는 기본적으로 클래스 함수들이 바운드 되지 않기 때문이다.

클래스 컴포넌트에서는 이벤트 함수를 생성자에서 this에 bind 해준다.

콜백 이벤트 함수에서 this를 사용하기 위해서는 this를 bind 해줘야 한다.

콜백 안의 this는 기본적으로 Global Scope를 가리킨다.

---

섹션 9. Conditional Rendering

조건부 렌더링 - 조건에 따라서 렌더링이 달라지는것

자바스크립트의 Truthy / Falsy

truthy - true는 아니지만 true로 여겨지는 값

• 빈 객체, 빈 배열, 0이 아닌 숫자, 공백이 아닌 문자열

falsy - false는 아니지만 false로 여겨지는 값

• 숫자 0, 빈 문자열, null, undefined, NaN

 

&& 연산을 이용한 조건부 렌더링

조건문 && React Element 형태로 선언

삼항 연산자 대신에 사용하면 이쁠 것 같다.

&& 를 쓸때 주의할 점은 앞쪽 값이 falsy 인 경우에는 falsy 값이 렌더링 되는 문제가 있다고 한다.

&&를 쓸때는 true/false가 나오도록 작성해줘야 한다.

 

컴포넌트를 렌더링하고 싶지 않은 경우 null을 리턴하면 된다.

null을 반환해도 컴포넌트가 생성되기는 한다(DIdMount 생명주가 함수가 호출됨). React Element는 생성되고 DOM Element가 생성되지 않는다고 이해하면 될듯

---

섹션 10. List and Keys

리액트에서는 key로 반복되는 컴포넌트의 렌더링 최적화를 진행한다.

map 함수로 list의 렌더링을 수행한다.

 

키는 리스트에서 아이템이 추가, 변경, 삭제됐는지 확인하기 위한 값이다.

key 값으로 index를 사용하는건 좀... 그렇다.

아이템의 순서가 바뀔 수 있는 경우 문제가 생길 수 있음

---

섹션 11. Forms

 

COntrollerd Components는 값이 리액트의 ㅗㅌㅇ제를 받는 input form

각 input, button 단위로 state를 관리하는게 아니라

state를 관리하는 컴포넌트가 있고 그 안에 element들이 있다고 이해하면 된다.

Controlled Component가 상태를 관리해서 제어하기가 편리함

 

<textarea value />

<select multiple value onChange><option value>display</select>

<input type="file" /> 파일은 Uncontrolled 값이다. 리액트가 관리하지 않는 값.

---

섹션 12. Lifting State Up

Shared State - 부모자식간의 상태 공유

부모에서 자식으로 상태를 전달하는 것은 props를 통해 전달하면 된다.

자식에서 부모로 상태를 전달하는 방법은 부모가 함수를 전달하고 자식에서 함수에 상태를 전달하는 방식으로 처리

 

Lifting State Up - 하위 컴포넌트의 state를 상위 컴포넌트로 올리는 것을 의미함

이게 항상 좋은 방식인가? 그건 잘 모르겠다.

---

섹션 13. Composition vs Inheritance

구성과 상속이라는 개념.

구성

• 여러개의 컴포넌트를 합쳐서 새로운 하나의 컴포넌트로 만드는 것
• 구성의 방식에는 다양하다.
• Containment - children 속성을 사용하는 방식
  • 분리된 여러개의 children 집합이 필요한 경우 props로 전달받아서 children으로 사용하면 된다.
  • 예> SplitPane의 left, right props로 Element 전달
• Specialization
  • WelcomeDialog는 Dialog의 특별한 케이스이다.
  • 범용적인 것을 구체적으로 만듬
  • 보통 상속으로 이런게 구현되지만 리액트에서는 구성으로 Specialization이 구현된다.

상속

• 다른 컴포넌트를 상속받아서 새로운 컴포넌트를 만드는 것
• 추천하지 않는다. 구성으로 다 구현해라!

---

섹션 14. Context

Context란? 아~ 중앙집중형 상태 관리를 말한다.

리덕스 적용하기 전에 Context를 사용했는데 단순한 상황에서는 충분이 대응이 가능

axios 사용이나 제어 등을 미들웨어에서 해야 되기 때문에 리덕스를 사용하여 관리하는게 편리

 

단점?

재사용성이 떨어진다.

props 체이닝을 줄이기 위해서 상위 Element에서 Element 자체를 Props로 전달할 수도 있다.

 

---

섹션 15. Styling

생략

---

섹션 16. Mini Project

생략