[React] connect 함수
https://react.vlpt.us/redux/09-connect.html
connect 함수는 컨테이너 컴포넌트를 만드는 또 다른 방법
useSelector, useDispatch가 더 편하기 때문에 많이 쓰이지만 왜 connect 함수를 썼는가?
-> 2019년 이전에 작성된 리덕스와 연동된 컴포넌트들은 connect로 작성됨.
-> https://github.com/khaledosman/react-redux-realworld-example-app
내가 참고하고 있는 React+Redux 탬플릿은 2019년 이전에 작성됐기 때문에, 옛날 방식을 사용함.
-> 클래스형 컴포넌트를 작성하면 Hooks를 사용하지 못하기 때문에 Connect를 사용해야한다.
->
2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다
클래스형 컴포넌트(Stateful 컴포넌트)? 함수형 컴포넌트(Stateless 컴포넌트)?
컴포넌트란?
컴포넌트는 단순한 템플릿 이상의 기능을 수행한다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행할 수도 있다
https://devowen.com/298
컴포넌트 목적에 따라 프리젠테이션 컴포넌트 / 컨테이너 컴포넌트로 나뉜다.
JS
import React from 'react';
function App() {
const name = '리액트';
return
}
export default App;
//
import React, { Component } from 'react';
class App extends Component {
render() {
const name = '리액트';
return
}
}
export default App;
두 방식의 컴포넌트의 역할은 동일함.
차이점 : 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능 사용할 수 있음. 임의 메소드를 정의할수있음, Render 함수가 꼭있어야함. 그 안에서 JSX를 반환해야함.
함수형 컴포넌트는 클래스형보다 선언하기 편하고, 메모리 자원을 덜 사용함.
state, 라이프사이클 API를 사용할 수 없었지만, 최근에 Hook이 도입되면서 해결됨.
함수형 컴포넌트의 선언 방식
1. 일반적인 함수 선언
2. ES6의 화살표 함수 선언
function BlackDog() {
this.name = '흰둥이';
return {
name: '검둥이',
bark: function() {
console.log(this.name + ': 멍멍!');
}
}
}
const blackDog = new Blackdog();
blackDog.bark(); // 검둥이: 멍멍!
function WhiteDog() {
this.name = '흰둥이';
return {
name: '검둥이',
bark: () => {
console.log(this.name + ': 멍멍!');
}
}
}
const whiteDog = new Whitedog();
whiteDog.bark(); // 흰둥이: 멍멍!
function()을 사용하면 검둥이가 나타나고, () => {} 를 사용하면 흰둥이가 나타난다. 일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다.
props는 프로퍼티(properties)를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 표현이다.
// 여기는 무슨 내용인지 모르겠음. 추가 공부 필요
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
그리고 경우에 따라서 propTypes 컴포넌트 속성을 통해 props의 타입을 지정해 줄 수도 있다.
타입스크립트를 사용한다면 굳이 propTypes를 사용하지 않아도 타입 체크를 할 수가 있다. 클래스형 컴포넌트의 경우 render 함수에서 this.props를 조회해서 사용할 수 있다.
