React

👉 React

페이스북이 만든 라이브러리(하지만 Redux나 MobX, react-router와 함께 프레임워크처럼 사용) Redux 공부 check
Component 시스템을 구현했기 때문에 효율적으로 코딩 가능

👉 Component란 하나의 의미를 가진 독립적인 단위 모듈

👉JSX

자바스크립트의 확장 문법
1) 반드시 하나의 엘리먼트로 감싸야 한다.

        return  (
            <h1> Hello Velopert</h1>
            <h2> Welcome </h2>
        );				// error

        return  (
            <div>
                <h1> Hello Velopert </h1>
                <h2> Welcome </h2>
            </div>
        );				// div element를 wrapper로 사용

2) 자바스크립트 코드를 적용할 땐 { } 적용
3) JSX 내부에선 if문을 사용할 수 없다. IIFE or 삼항연산자 사용

// condition이 true이면, 연산자 expr1의 값을 반환 
var age = 29;
var canDrinkAlcohol = (age > 19) ? "True, over 19" : "False, under 19";
console.log(canDrinkAlcohol); // "True, over 19"

// 삼항연산자
// &&
//조건이 true일때만 보여지고 false일 경우에는 아무것도 보여주지 않는다.
1 + 1 === 2 && '맞습니다' // '맞습니다' 
1 + 1 === 3 && '맞습니다' // false

// ||
// 조건이 false보여지고 true 경우에는 아무것도 보여주지 않는다.
1 + 1 === 3 || '틀립니다' // '틀립니다' 
1 + 1 === 2 || '틀립니다' // true

4) className을 사용

👉 Key Concepts

1. Data Flow : 단방향 데이터 흐름, 한 방향으로만 데이터 이동

2. Props

상위 컴포넌트가 하위 컴포넌트에게 내려주는 데이터, 단순히 사용만 가능, 변경 불가능, 부모 컴포넌트에서 전달하는 props가 바뀌면 자동으로 업데이트, props는 html처럼 기본이 문자열이기 때문에 다른 자료형을 전달하기 위해서는 { } 안에 넣어야 한다.

3. State

컴포넌트가 갖는 상태, 객체의 형태로 컴포넌트 내에서 보관 / 관리, Class 컴포넌트로 작성, 값을 변경할 땐 반드시 setState 메서드를 사용

4. setState

state를 바꾸려면 this.state.이름 = 바꿀 값이 아니라 this.setState((이전 상태) => ({ 이름: 바꿀 값 }));

👉Life Cycle

컴포넌트가 실행되거나 업데이트 되거나 제거될 때, 특정한 이벤트들이 발생

✔ Mount

컴포넌트가 처음 실행될 때 그것을 Mount라고 표현한다. 컴포넌트가 시작되면 우선 context, defaultProps와 state를 저장한다. 그 후에 componentWillMount 메소드를 호출하고 render로 컴포넌트를 DOM에 부착한 후 Mount가 완료된 후 componentDidMount가 호출된다.
주의할 점은, componentWillMount에서는 props나 state를 바꾸면 안 된다. Mount 중이기 때문이다. 그리고 아직 DOM에 render하지 않았기 때문에 DOM에도 접근할 수 없다.
componentDidMount에서는 DOM에 접근할 수 있습니다. 그래서 여기에서는 주로 AJAX 요청을 하거나, setTimeout, setInterval같은 행동을 합니다.
다음 순서로 실행됩니다.

state, context, defaultProps 저장
componentWillMount
render
componentDidMount

✔ Props Update

props가 업데이트될 때의 과정이다. 업데이트되기 전에 업데이트가 발생하였음을 감지하고, componentWillReceiveProps 메소드가 호출된다. 그 후 shouldComponentUpdate, componentWillUpdate가 차례대로 호출된 후, 업데이트가 완료(render)되면 componentDidUpdate가 된다. 이 메소드들은 첫 번째 인자로 바뀔 props에 대한 정보를 가지고 있다. componentDidUpdate만 이미 업데이트되었기 때문에 바뀌기 이전의 props에 대한 정보를 가지고 있다.
shouldcomponentUpdate에서는 아직 render하기 전이기 때문에 return false를 하면 render을 취소할 수 있다.
componentWillUpdate에서는 state를 바꿔서는 안 된다. 아직 props도 업데이트하지 않았으므로 state를 바꾸면 또 shouldComponentUpdate가 발생한다. componentDidUpdate에서는 render이 완료되었기 때문에 DOM에 접근할 수 있다.

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

✔ State Update

setState 호출을 통해 state가 업데이트될 때의 과정이다. props update와 과정이 같지만, componentWillReceiveProps 메소드는 호출되지 않는다. 그리고 메소드의 두 번째 인자로는 바뀔 state에 대한 정보를 가지고 있다. componentDidUpdate는 두 번째 인자로 바뀌기 이전의 state에 대한 정보를 가지고 있다.

shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

✔ Unmount

컴포넌트가 제거되는 것은 Unmount라고 표현합니다. 더는 컴포넌트를 사용하지 않을 때 발생하는 이벤트가 있습니다. componentWillUnmount가 그것입니다. componentDidUnmount는 없습니다. 이미 제거된 컴포넌트에서 이벤트를 발생시킬 수는 없겠죠? componentWillMount에서 주로 연결했던 이벤트 리스너를 제거하는 등의 여러 가지 정리 활동을 합니다.

componentWillUnmount