surf react : state와 props

Dino_·2021년 7월 16일

Props React State

surf react

목록 보기

4/9

🔔 Goal

state와 props를 이해한다.
setState 함수를 이해한다.

🌳 state

state는 컴포넌트 내에서 사용되는 데이터를 의미한다. 읽기 쓰기 모두 가능하다.
시간이 지남에 따라 상태가 변하는 값이나, Input 같은 사용자 입력으로 특정 요소를 불러올 때, state를 사용한다.

아래는 state를 작성하는 두가지 방법이다.


/*class내에 state를 선언*/
class Counter extends Component {
   state = {
     number: 0
  };
}

/*생성자를 통해 state를 선언*/
class Counter extends Component {
   constructor(props) = {
     super(props);
     this.state = {
       number: 0
     }
  };
}

생성자로 state를 선언할 때 super를 왜 작성해야 하는가?

자바스크립트 언어적 제약사항으로 생성자에서 super를 호출하기 전까지는 this를 사용할 수 없다.

mozila super 개념

조금 설명을 보태자면 Component를 상속했지만 이렇게 constructor 를 작성하게 되면 기존의 클래스 생성자를 덮어쓰게 된다. 그렇기에, 리액트 컴포넌트가 지니고있던 생성자를 super를 통하여 미리 실행하고, 그 다음에 우리가 할 작업 (state 설정) 을 해주는 것이다.

🍃 state를 직접 수정하지 마라

state의 값을 바꾸기 위해 this.setState를 반드시 거쳐야한다.

setState()가 호출되면 컴포넌트가 리렌더링을 하게 설계되어 있다. 하지만 직접 수정은 리렌더링되지 않는다.

class Counter extends Component {
   state = {
     number: 0
  };

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

this.state를 직접 지정할 수 있는 유일한 공간은 바로 constructor이다.

🍃 setState에 대해서

아래와 같이 state에 다음과 같은 값들이 있다고 가정해보자.

  state = {
    number: 0,
    foo: 'bar'
  }

여기서 this.setState({ number: 1 }); 을 하게 된다면, foo 는 그대로 남고 number 값만 업데이트 된다. 하지만, setState는 객체의 깊숙한 곳까지 확인하지는 못한다.

예를들어 state가 다음과 같이 설정되어있다고 가정해보자.

  state = {
    number: 0,
    foo: {
      bar: 0,
      foobar: 1
    }
  }

아래와 같이 한다고 해서 foobar 값이 업데이트 되지 않는다는 것이다.
단순히 기존의 foo 객체가 바뀌어버린다.

this.setState({
  foo: {
    foobar: 2
  }
})

/*
  *result*
  --------
  number: 0,
  foo: {
    foobar: 2
  }
  --------
*/

그 대신에 위와 같은 상황에서는 이렇게 해주어야 한다.

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

…은 자바스크립트의 전개연산자이다. 기존의 객체안에 있는 내용을 해당 위치에다가 풀어준다는 의미이다. 그 후에 설정하고 싶은 값을 또 넣어주면 해당 값을 덮어쓰게 된다.

surf javascript 시리즈에서 자세히 다룰 예정이다.

🌳 props

react에서 props는 읽기 전용, 즉 변하지 않는 데이터이다. 상위 컴포넌트에서 하위 컴포넌트로 데이터를 넘겨줄 때 사용한다.

import Hello from "./Hello";

function App() {
  return (
    <div className="App">
      <Hello name={"jangwook"} age={24} />
    </div>
  );
}

export default App;

App 컴포넌트가 하위 Hello 컴포넌트로 props(name, age)를 전달하는 코드이다.

보다시피 react에서는 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하기 위해선 코드와 같이

<FuncName propsName = {??} />

이런 양식으로 작성하는 하나의 약속을 가지고 있다.

아래는 여러 방식의 Hello 컴포넌트를 작성한 코드이다.

/* class component*/
class Hello extends Component {
  render() {
    return (
      <div>
        안녕하세요. 제 저는 {this.props.name} 이고 {this.props.age} 세 입니다.
      </div>
    );
  }
}

export default Hello;

/* functional component*/
const Hello = (props) => {
  return (
    <div>
      안녕하세요. 제 저는 {props.name} 이고 {props.age} 세 입니다.
    </div>
  );
};

export default Hello;


/*functional component + destructuring assginment*/
const Hello1 = ({ name, age }) => {
  return (
    <div>
      안녕하세요. 제 저는 {name} 이고 {age} 세 입니다.
    </div>
  );
};

export default Hello;

🍃 defaultProps

상위 컴포넌트에서 props를 지정하지 않을 시, 기본적으로 사용할 값을 설정할 수 있다.

아래의 코드는 defaultProps 설정을 두 가지의 방법으로 작성한 코드이다.

import Hello from "./Hello";

class Hello extends Component {
  static defaultProps = {
    name: "gildong",
    age: 2400,
  };

  render() {
    return (
      <div>
        안녕하세요. 제 저는 {this.props.name} 이고 {this.props.age} 세 입니다.
      </div>
    );
  }
}

export default Hello;

import Hello from "./Hello";

class Hello extends Component {
  render() {
    return (
      <div>
        안녕하세요. 제 저는 {this.props.name} 이고 {this.props.age} 세 입니다.
      </div>
    );
  }
}


Hello.defaultProps = {
  name: "gildong",
  age: 2400,
};


export default Hello;