[React] react (props와 state) (누구든지 하는 리액트 4편 공부정리)

* velopert.com/3629 글을 공부하며 이것저것 해보며 정리한 글입니다 

 

props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값 (직접 수정 불가, 부모한테 받은 함수props로 업데이트가능)

state는 컴포넌트 내부에서 선언하며 값을 변경할 수 있다.

 

모든 것을 함수형으로 공부 중임 

함수형 컴포넌트와 클래스형 컴포넌트의 주요 차이점은 state와 lifeCycle이 빠져있다는 것이다.

초기 마운트가 좀 더 빠르고 메모리 자원을 덜 사용한다는 장점이 있다.

(*그보다는 나는 좀 더 짧고 간략히 작성할 수 있어서 좋다. 앞으로 리액트 개발이 함수형으로 된다는 것도 중요한 점이라고 생각한다)

 

Name 컴포넌트를 만들어서 name props를 만들어서 전달해준다.

({name}) 이런 식으로 destructing해서 사용할 수 있다.

 

import React from "react";

const style = {
  width: "100vw",
  height: "100vh",
  background: "black",
  padding: "16px",
  color: "#fff",
  fontSize: "28px",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
};
const Name = ({ name }) => {
  return <div>제 이름은 {name}입니다</div>;
};

const App = () => {
  const value = 1;
  return (
    <div style={style}>
      <Name name="해랑쓰" />
    </div>
  );
};

export default App;

 

 

 

Default Props (함수형 컴포넌트)

 

props 설정을 잊어버렸을 때 기본값을 설정해준다

 

import React from "react";

...

const Name = ({ name }) => {
  return <div>제 이름은 {name}입니다</div>;
};

Name.defaultProps = {
  name: "기본 이름",
};

const App = () => {
  const value = 1;
  return (
    <div style={style}>
      <Name />
    </div>
  );
};

export default App;

 

 

 

클래스 컴포넌트 살펴보기

 

클래스 컴포넌트에서 메서드를 사용할 때는 this값이 undefined가 되지 않도록 바인딩을 해줘야한다

함수가 클릭 이벤트로 전달되는 과정에서 this와의 연결이 끊긴다

 

  constructor(props) {
    super(props);
    this.handleIncrease = this.handleIncrease.bind(this);
    this.handleDecrease = this.handleDecrease.bind(this);
  }
  
    handleIncrease() {
    this.setState({
      number: this.state.number + 1
    });
  }

  handleDecrease() {
    this.setState({
      number: this.state.number - 1
    });
  }

 

화살표 함수로 작성하면 bind안해줘도 된다

 

setState

 

리액트는 this.setState가 호출되면 리렌더링 되도록 되어있다. 

객체로 전달되는 값만 업데이트 해준다.

 

객체의 깊숙한 곳은 확인하지 못한다 

 

 state = {
    number: 0,
    foo: {
      bar: 0,
      foobar: 1
    }
  }
  
this.setState({
  foo: {
    foobar: 2
  }
})

기존 foo 객체가 바뀌어버린다

 

전개 연산자로 해결한다 (immutable.js 나 immer.js로 해결가능하다)

 

this.setState({
  number: 0,
  foo: {
    ...this.state.foo,
    foobar: 2
  }
});

 

this.setState를 하는 여러 방법 

 

//비구조화 할당
this.setState(
  ({ number }) => ({
    number: number + 1
  })
);

const { number } = this.state;
this.setState({
  number: number + 1
})