Unit4

드디어 리액트를 배웠다.
리액트를 말로만 들어봤지 사용해본적은 한번도 없었다. 하지만 이번 시간을 통해 리액트에 대한 기본 개념을 배우고, 페어분과 과제를 통해 리액트를 사용하여 Twittler를 만들어 보면서 리액트에 대해 배우게 된다.

리액트(React)

리액트란 무엇일까?

리액트는 한마디로 웹 프레임워크이다. 우리가 개발을 할때 도와주는 역할을 한다고 보면된다!
프론트엔드에서 가장 많이 사용되는 프레임워크로, facebook에서 제공해 준다고 한다.

리액트의 3가지 특징

1.JSX 문법

JSX는 자바스크립트를 확장한 문법으로, 이 문법을 통해 React 엘리먼트를 만들 수 있다.
그리고 빌드시 Babel에 의해 자바스크립트로 변환된다.

사용이유?

사용이유는 자바스크립트 문법과 HTML문법을 동시에 이용해 기능과 구조를 한눈에 활용할 수 있고,
DOM 코드보다 명시적으로 작성할 수 있다.

2.Component 기반

React는 컴포넌트 기반으로 단일 기능을 하는 여러 컴포넌트 모듈을 쌓아서 하나의 어플리케이션을 만든다. 그리고 재활용성을 극대화 시킬 수 있다.

Element

화면에 렌더링 할 DOM 노드들의 정보를 React에게 알려주기 위한 수단이다.
React.createElement() 혹은 JSX 로 작성한다.

1. 클래스형 컴포넌트 : 로컬 state, 생명주기 함수 호출 가능, 컴포넌트 인스턴스를 내부에 가짐.


2. 함수형 컴포넌트 : 로컬state, 생명주기 함수 호출 불가능, just함수이다.(Hook)으로 보완가능.

Array 형태의 컴포넌트 생성 -> map함수 사용하여 각 컴포넌트에 값 넣어서 만듬, 유일성 가져야하므로 key속성에 값 넣어야함.

const RootComponent = () => {
  return (
    [1,2,3,4].map(cur, idx => <Component key={idx} val={cur} /> )
  )
}

props, state

1.state : 컴포넌트 내부에서 가지는 값 (내꺼)

2.props : 부모 컴포넌트가 자식 컴포넌트에게 주는 값 (부모→자식)

Hook

반드시 컴포넌트 내부에 선언되어야 함.
view와 로직을 분리시켜주는 핵심 역할.

const [state, setState] = useState(initialState);

useState()

비동기적으로 State를 업데이트한 뒤 리렌더링 요청을 한다.

비동기 호출 이유
1. 내부 일광성 유지
2. 동시 업데이트 활성화

3.Virtual DOM

React에서 제공하는 가상의 DOM으로, 가상 DOM에서 변경된 내용만 먼저 확인해서 실제 DOM에 업데이트 하여 불필요한 단계를 줄인다.
-> 변화가 일어난 부분만을 대체하기 때문에 렌더링 성능이 우수하다.