React 개념(1)

리액트에서 ui들을 구성하는 방법에는 크게  두 가지 방법이 존재한다. 

하나는 클래스형, 나머지 하나는 함수형이다. 

이 때 클래스형에는 component와 성능향상을 위해 PureComponent가 존재하고 

함수형에는 function과 성능 향상을 위해 memo와 reacthook이 존재한다. 

 

*클래스 컴포넌트

리액트 컴포넌트 생성 리액트의 component 클래스를 상속해준다.

• component 클래스를 상속받아 만든 클래스에서는 render()함수가 무조건 구현이 되어야한다. 
• 클래스를 구성하는 데 있어서 안에 쓰이는 멤버 변수나 parameter들은 this.prop(or)state.멤버 변수 형태로 쓰여져야한다.
• 클래스의 특성상, 한 번 생성이 되면 클래스 내부의 함수를 아무리 많이 호출해도 멤버 변수를 직접 수정하지 않는 한 그 값이 계속 유지가 된다. 
• 따라서 render함수가 아무리 많이 호출이 되어져도 계속 호출이 되어지면 re-render가 되지만 전의 상태를 기억하고 있다. 따라서 this.state는 유지되므로 컴포넌트에서 가지고 있던 데이터를 잃어 버리지 않고 일정하게 데이터를 사용자에게 보여줄 수 있는 것이다. 
• 클래스형 컴포넌트가 업데이트 되는 메커니즘은 this.state만 업데이트를 해주면 리액트가 알아서 그 컴포넌트의 render함수를 다시 호출한 뒤 브라우저에 업데이트를 해주게 된다. 

리액트의 메커니즘은 데이터(state)가 변경이 되면 리액트가 render()함수를 호출해서 ui가 업데이트가 된다.

---

함수형 컴포넌트

 

함수형 컴포넌트 작성법

여느 프로그래밍 언어와 다름없이 jsx에서도 함수라면 return값이 필요하다. 여기서 return값은 클래스형 컴포넌트의 render함수와 유사하다고 생각할 수 있겠다. 

• 하지만 이렇게 함수형으로 컴포넌트를 작성하면 state를 가질 수 가 없다. 외부에서 전달받은 데이터(prop)만 보여주거나 state나 prop이 모두 없는 정적인 컴포넌트의 경우 function을 사용해서 리액트 컴포넌트를 작성 가능하다.
• 함수의 특성상 함수를 호출할 때마다 함수의 코드 블럭이 다시 실행이 되고, 그 안에 선언한 모든 지역 변수들 또한 다시 재 정의 되고 값도 새로 할당이 된다. 
• 그래서 함수 안에서 state를 보관해서 업데이트를 하는 것이 불가능하다. 왜냐하면 함수가 호출되기 전 지역 변수의 값을 기억할 수 있는 방법이 없기 때문이다. 계속해서 새롭게 할당이 되고 초기화가 된다. 

따라서 함수형 컴포넌트는 state가 필요가 없고, 리액트에서 제공하는 라이프 사이클 메소드를 사용하지 않아도 되는 간단한 컴포넌트의 경우에 정의해서 사용가능하다.

---

리액트 훅

하지만 최근 들어 개발된 리액트 훅이라는 방법은 함수형 컴포넌트에서도 state와 라이프 사이클 메소드를 사용할 수 있게 해준다.

 

• 리액트 훅은 함수형 컴포넌트에서 클래스 기반 컴포넌트와 같이 동작할 수 있도록 도와주는 친구로 여러가지 API들이 존재한다.
• 왜 우리는 리액트 훅을 이용하는 것이 편리할까?-이유는 클래스 기반 컴포넌트에서는 state에 접근하려면 반복적으로 this.state.와 같이 this.binding 요소를 적어줘야하지만 함수형에서는 자신의 로컬 변수이기 때문에 위와 같은 코드 없이도 바로 접근이 가능하기 때문이다. 
  • State Hook- 함수형 컴포넌트에서 state를 사용하지 못하는 이유는 함수가 호출될 때마다 지역변수들도 새로 호출되어 이전 state의 내용을 기억하지 못하기 때문인데 useState API를 사용하면 이와 같은 문제를 해결할 수 있다. 
  • Effect Hook- 리액트의 함수형 컴포넌트에서 라이프 사이클 메소드처럼 활용할 수 있는 useEffect()가 존재한다.