React란 무엇인가?

1. 리액트란 무엇인지
2. 그리고 리액트를 사용하는 이유

위 두가지를 알아보겠습니다

React란?

1. Facebook에서 개발하고 관리하는 UI 라이브러리입니다.

2. React는 UI기능만 제공

3. 전역상태, 라우팅, 빌드시스템 등을 각 개발자가 직접 구축해야함

4. 자유도가 높으나, 개발환경을 직접 구축해야하는 까다로운 점이 있음

5. React 개발 팀에서 제공하는 creat-react-app을 통해 이 단점을 어느정도 보완함

UI 라이브러리인 리액트를 사용하는 이유

1. UI를 자동으로 업데이트 해줌

• UI = render(state)

API나 사용자 이벤트를 통해서 프로그램의 상태값은 변경합니다. 그리고 리액트가 변경된 상태값을 기반으로 UI를 자동으로 업데이트 해줍니다. 그렇지 않으면 Browser의 DOM을 직접 수정해야하는 단점이 있음.

2. render 함수는 순수 함수로 작성

순수함수의 특징 : 입력값이 같으면 출력값이 같다.

랜덤 함수 사용(x), 외부 상태 변경(x) 을 활용하면 render값의 출력에 영향을 줄 수 있으니 하지말도록 하자..

3. state는 불변 변수로 관리

react와 redux의 공식 문서를 읽다 보면 Immutability를 강조하는 대목을 종종 볼 수 있다. 왜 불변성(Immutability)를 유지해줘야 할까?

불변성을 지키지 않으면 우리는 컴포넌트를 최적화 할 수 없다.

리액트가 컴포넌트를 렌더링하는 과정을 살펴보자.

1. setState를 호출 (혹은 부모로부터 props를 전달 받음)

2. shouldComponentUpdate를 실행했는데 false를 리턴하면 여기서 멈추고, true를 리턴하면 다음 단계로 이동

3. 가상 DOM과 실제 DOM을 비교해서 변경사항이 있으면 화면을 다시 그린다

핵심은 2번에 있다. 다음과 같은 2개의 상태를 비교한다고 가정해보자.

const array = [1,2,3];
const sameRef = array;
sameRef.push(4);

console.log(array !== sameRef); // false
console.log(array == sameRef); // true

// 즉 복사해서 넣은 값이 해당 배열의 데이터 정보를 갖고 있는 주소(레퍼런스)가 복사된다.

const array = [1,2,3];
const difRef= [...array, 4];

//...은 '전개구문', '스프레드 연산자'라고 불리며 ES6에서 추가된 배열을 복사하는 연산자이다.

console.log(array !== difRef); // true
console.log(array == difRef); // false

// 이 두 배열은 서로 다른 레퍼런스를 가짐

첫 번째 코드의 array와 sameRef변수가 참조하고 있는 배열의 주소 값은 서로 같다. 하지만, 두 번째 코드의 각각의 배열은 다른 레퍼런스를 가지기 때문에 비교했을 때 다르다는 결과 값이 나오게 된다. 이와 같이 불변성을 유지하여 코드를 작성하면 각 객체의 값이 아닌 레퍼런스 값만 비교를 해주면 된다.

불변성을 유지한다는 것에 대해 간단히 설명하자면,

첫 번째 array와 sameRef의 레퍼런스 값은 같다. 고로 둘 중 어느 하나를 변경하게되면 둘 다 값이 함께 변하는 일이 생기게된다. 의도했어도, 의도하지 않았어도 문제이다.

하지만 두 번째 예시인 array와 difRef의 레퍼런스 값은 다르기에 둘 중 어느 하나의 값을 변경하더라도 각 데이터의 불변성이 유지된다.

즉, shouldComponentUpdate내의 코드는 한 줄이면 컴포넌트를 최적화할 수 있게 된다.

하지만, 불변성을 유지하며 코드를 작성하다보면 상태 업데이트 로직이 복잡해질 수 있다.

state = {
    i : {
        am: {
            hungry: {
                now: 'starved',
                aim: 'egg'// 이 부분을 바꾸고 싶다
            },
            on_a_diet: {
                now: 'unhappy',
                goal: '70'
            }
        }
    }
}

const { where } = this.state;
this.setState({
    i: {
        ...i,
        am: {
            ...i.am,
            hungry: {
                ...i.am.hungry,
                aim: 'hamburger'
            }
        }
    }
});

위의 예시만 봐도 충분히 복잡해지는 것을 볼 수 있다.

이런 상태 업데이트 로직을 편하게 해주는 대표적인 라이브러리가 우리가 React를 사용하면서 패턴 처럼 많이 사용해왔던 Immutable.js이다.

정리하자면, React의 상태는 컴포넌트 최적화를 위해 불변성을 유지해야하며 이를 편하게 하기 위해 Immutable.js같은 불변 객체를 반환해주는 라이브러리를 사용한다.

4. 가상 돔 (virtual dom)

React의 최대 장점 중 하나로 가상 돔을 통해서 UI를 빠르게 업데이트 하는 것이다. 가상 돔은 이전 UI 상태를 메모리에 보관을 해서 변경된 부분만 실제 DOM에 변경을 해주는 기술로, 불필요한 UI 업데이트를 줄여 성능을 향상시킴

하지만 순수 자바스크립트로 작성한 코드보다 빠르다는 것이 아니며, 프로젝트 특성에 따라서 성능 최적화는 다를 수 있음.

참고 자료 : https://github.com/BKJang/dev-tips/issues/42