react function component

그동안은 class형 컴포넌트로 LifeCycle 메서드를 활용해 state에 변화를 주었다면,

이제는 현업에서도 더 많이 사용되는 function형 컴포넌트로 Hooks를 이용할 것이다

state, setState()

class형 컴포넌트

constructor() 메서드를 통해 state 초기값을 설정하고
setState() 메서드를 통해 state의 값을 변경해줬다면,

constructor() {
  super();
  state: 초기값,
}
  
render() {
  setState({state: state+1});
}

function형 컴포넌트

useState()를 사용해서 state의 초기값 및 해당하는 state를 변경하는 함수를 한꺼번에 지정할 수 있다

let [userName, setUserName] = useState("");
let [userEmail, setUserEmail] = useState("");
let [userPw, setUserPw] = useState("");

setUserName('박은정');
setUserEmail('beanlove97@gmail.com');
setUserPw('비밀번호이다');

자식 컴포넌트에 props 전달

class형 컴포넌트

// this.props 의 key값들을 꺼내다 쓴다
const { title, name, responseData } = this.props;

this.props를 통해 부모로부터 상태 this.props를 전달받고
자식 컴포넌트는 객체형태의 this.props 에서 []이나 . 연산자를 통해 접근해서 데이터를 활용한다

// Main.js
<GoodsList
title="새로 나왔어요"
name="newList"
responseData={newList} />;

// GoodList.js
const { title, name, responseData } = this.props;
<li>
  {responseData.map(data => (
    <Goods data={data} />
  ))}
</li>;

// Good.js
const { name, image } = this.props.data;

<div className="goods">
  <img src={image[0]} alt="나와라" className="goodsImg" />
  <h2 className="goodsName">{name}</h2>
</div>;

function형 컴포넌트

const SignUpInput = props => {
}

함수를 선언할 때부터 매개변수로 props를 받아와서 그 props 객체에 접근해서 데이터를 활용한다

// SignUp.js
<SignUpBtn disabled={!check} onClick={() => handleBtn()}>
  회원가입
</SignUpBtn>;

// SignUpBtn.js
const SignUpInput = props => {
const { name, title, type, validation,
       inputAlert, setName } = props.data;

<Input name={name} type={type} onChange={e => setName(e.target.value)} />
}

다른페이지로 이동

class형 컴포넌트

this.props.history.push("/login");

Route.js 에 직접적으로 연결된 컴포넌트는 바로 사용이 가능하지만
그렇지 않은 컴포넌트에서 이러한 메서드를 활용하고 싶으면
withRouter 컴포넌트로 감싸줘야 한다

import { withRouter } from "react-router-dom";
export defalut withRouter(SinUp);

function형 컴포넌트

import { useHistory } from "react-router-dom";
const history = useHistory();
history.push("/login");

이렇게 useHistory Hook 을 활용해주면 된다