[부스터코스/웹 프론트엔드 시작하기 (리액트&리덕스)] state와 props - state와 key

지금까지 알아본 props는 'props'를 제공하여 컴포넌트를 조작할 수 있게 해주었다.

state는 props의 값에 따라 내부의 구현에 필요한 데이터라고 생각하면 된다.

 

App.js

위 App.js 파일의 컴포넌트들을 보면 props의 값들이 모두 하드코딩되어 있는 것을 볼 수 있다.

이 props 값들을 state로 만들고 state의 값을 컴포넌트들의 props로 전달해서 코드를 개선해보자.

 

먼저 state의 값을 초기화시키려면 App 클래스에 render() 함수보다 먼저 constructor() 함수를 사용해야한다.

constructor (props) {
    super(props);
    this.state = {
      subject: { title: "WEB", sub: "world wide web!!!" },
    }
  }

constructor() 함수는 render() 함수가 실행되기 전에 먼저 실행되어 데이터들을 초기화한다.

함수 내에 super(props)를 선언해주는 이유는 우선, 자바스크립트에서 super()를 선언하기 전까지 this 키워드를 사용할 수 없어서이다.

그리고 props를 인자로 전달해줌으로써 생성자 내부에서도 this.props를 정상적으로 사용할 수 있게 보장해준다.

props를 인자로 전달하지 않아도 리액트 내부적으로 객체에 props 속성을 세팅해준다. 하지만 생성자 내부에서 super()가 호출되고 생성자가 끝나기 전까지 this.props는 undefined값을 가지게 될 것이다.

이런 this.props가 undefined값인 상태에서 생성자 내부에 다른 함수를 호출할 때 발생하는 문제를 회피하기 위해 super()에 props를 인자로 전달해주는 것이다.

자세한 내용은 아래 링크들을 참조하자.

https://developer-talk.tistory.com/136

[React]super()와 super(props)의 차이

https://higher77.tistory.com/68

Class 컴포넌트 Constructor에서 super(props)를 써야하는 이유

이제 "this.state = {}" 코드를 사용해서 state 값을 초기화시키면 된다.

파이썬의 딕셔너리처럼 초기화한다.

 

이렇게 초기화된 state는 아래와 같이 사용할 수 있다.

<Subject title={this.state.subject.title} sub={this.state.subject.sub}></Subject>

브라우저 화면

이 전과 똑같은 화면을 보여주지만 props의 데이터는 state에서 가져온 것이라는 차이가 있다.

이렇게 state를 사용하면 코드만을 봐서 state의 subject가 어떤 값을 가지는지 알 수 없게된다.

즉, 정보 은닉의 효과를 가지게 되는 것이다.

 

이제 state를 사용해서 다른 컴포넌트들도 수정해보자.

contents 배열 안에 id, title, desc를 가지는 state를 만들어 놨다.

이 contents를 props로 받아서 처리하도록 TOC 컴포넌트와 Content 컴포넌트를 수정한다.

 

TOC.js

Content.js

브라우저 화면

위 코드에서 key라는 새로운 props가 보이는데, 이 코드가 없어도 리액트 화면을 잘 렌더링된다.

하지만 콘솔창에서 오류가 발생하는데, 리액트 내부에서 필요하기 때문에 요청하는 값이기 때문이다.

요소마다 적절한 key값을 설정해주면 오류는 사라진다.

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web231/lecture/1387399

웹 프론트엔드 시작하기 (리액트&리덕스)