리액트 2주차

리액트의 동작 방식에 대해 배운다

컴포넌트

리액트는 조각 조각들을 모아서 웹페이지 하나를 완성하는데 이 조각 조각들을 컴포넌트(Component)라고 부른다.

라이프 사이클이란?

컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 말한다.

라이프 사이클은 크게 생성 / 수정 / 삭제 로 나뉜다.

수정되는 경우들

• 컴포넌트 자신의 데이터state가 바뀌었을 때
• 부모가 나한테 주는 데이터 props가 바뀌었을 때
• 부모가 리렌더링 되었을 때
• 강제 업데이트를 일으켰을 때

가상돔

👉 DOM : HTML 단위 하나하나를 객체로 생각하는, 트리구조를 갖고 있는 모델

왜 쓰는가?

OM트리 중 하나가 수정될 때마다 DOM을 찾고, 수정하고를 하게되면 필요없는 연산이 너무 많이 일어나기 때문에 이를 막기위해 사용

동작방식

모리에 가상DOM에 변경사항을 전부 다 넣고 진짜 DOM과 비교하여 바뀐 부분만을 변경해준다.
=> 이 때 render가 진행된다.

진짜 DOM은 페이지에 처음 진입했을 때와 가상돔을 이용해 데이터가 변경 될 때 나타난다.

2강

클래스형 컴포넌트 함수형 컴포넌트가 있다.

2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다.

근데 왜 클래스형 컴포넌트를 배우는가?

여기선 클래스형 컴포넌트를 알아듣고 수정할 수 있을 정도로 알아두기 위해 배운다.
라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다.

어떤 것(요소)이 바뀌느냐는 render의 return에 포함되어 있다.
이 요소들이 가상돔에서 실제 돔으로 올라가면 수정(업데이트)가 완료된 것

3강

컴포넌트 (Component)

리액트는 컴포넌트를 잘 나누는 것도, 잘 쌓아올리는 것도 중요하다.

컴포넌트가 쓰는 데이터 Props, State

Props

• 부모로부터 받아온 데이터
  A라는 부모와 B라는 자식이 있다.
  A가 B에게 데이터를 주면 이 데이터는 B에게 props가 되는 것
  props는 수정이 불가능하다.

State

• 내 데이터, 컴포넌트 자체의 데이터
• 수정, 생성이 자유롭다.

4강

export와 import

export default의 경우 중괄호가 필요 없지만
그냥 export만 쓸 경우엔 중괄호가 필요하다
export {BucketList};

import {BucketList} from "./BucketList"
export default BucketList;
import BucketList from './BucketList';

5강

함수형 컴포넌트를 클래스형 컴포넌트로 바꾸기

// 클래스형 컴포넌트
class App extends React.Component{
// 초기화 해 줄 초기화 함수가 필요, 생성자
constructor(props){
super(props);
this.state = {
list: ["영화관 가기", "강의 듣기", "카페 가기"],
}
}

// 돔에 표현되기 위해서 render를 만들어준다. JSX에선 1개 이상의 리턴 값이 필수
render () {
console.log(this.state.list)
return (

  <div className="App">
    {/* 자바스크립트 변수는 중괄호를 사용 */}
    <BucketList list={this.state.list} /* <= props명과 넘겨줄 데이터 *//>
  </div>
)

}
}

// 함수형 컴포넌트
function App() {
return (

 <div className="App">
   <BucketList/>
 </div>

);
}