[KDT 강의] 리액트 뜯어보며 이해하기 2

props : 부모 컴포넌트로부터 상속받는 자식 컴포넌트에 데이터를 전달하는 방법

            자식 컴포넌트에서 읽기 전용(immutable)으로 사용되며,

            변경하고자 할 때는 부모 컴포넌트에서 state를 조작해야 한다. 

 

 

VS

 

 

 

state : 해당 컴포넌트 내에서 데이터를 전달하는 방법

            변경 가능(mutable)하고 변경이 되면 화면이 re-render 된다. 

 

 

 

 

 

자식 컴포넌트의 state들을 한 곳에서 모아 유지해야 하거나,

두 개의 자식 컴포넌트들이 서로 통신을 해야해서 가능하게 하려면,

부모 컴포넌트에 공유 state를 정의해야 한다 ! => 부모 컴포넌트는 props를 사용해 자식 컴포넌트에 state를 다시 전달할 수 있고, 이를 통해 자식 컴포넌트들이 서로 혹은 부모 컴포넌트와 동기화하도록 만든다.

 

 

 

 

 

 

 

 

 

React에서 원본 데이터의 불변성을 지켜야 하는데,

1. 참조 타입의 객체나 배열의 값을 변경시킬 때 원본 데이터가 변경되기 때문에, 이 원본 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있어 불변성을 지키지 않으면 프로그래밍의 복잡도가 올라갈 수 있게 된다.

2. 리액트에서는 화면을 업데이트할 때 원래의 이전의 값과 비교해서 변경된 사항만을 확인한 후 업데이트하는 구조이기 때문에 원본의 불변성을 지켜줘야 한다.  

 

=> 참조 타입에서는 값을 바꿨을 때 Call Stack의 주소 값은 같지만, Heap 메모리 값을 바꿔주기 때문에 불변성을 유지할 수 없으므로 배열같은 경우, 새로운 배열을 반환하는 메소드를 사용하며 불변성을 지킬 수 있다 ! like) map, filter, slice, reduce 메소드, spread 연산자   cf) splice, push 메소드는 원본 훼손시킴.

 

 

 

 

 

 

ReactConf 2018에서 class없이 state를 사용할 수 있는 새로운 기능으로 React Hooks가 발표되었다. 

원래 React는 클래스 컴포넌트를 주로 사용해왔으나,

리액트 훅스의 도입으로 점점 함수형 컴포넌트를 주로 사용하게 되었다.

 

 

 

클래스 컴포넌트 : 더 많은 기능을 제공, 더 긴 코드의 양, 더 복잡한 코드, 더딘 성능

 

VS 

 

함수형 컴포넌트 : 더 적은 기능을 제공, 짧은 코드의 양, 더 단순한 코드, 더 빠른 성능