[React] Props, State, Key

📌 참고 📌

https://www.youtube.com/watch?v=e2c1EUcW7oo&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=17

props

사용자의 관점으로 속성을 의미한다.
html 태그에서 attribute 로 불리며, react 에서는 props 로 불린다.
사용자가 컴포넌트의 기본적인 동작을 바꾸고 싶을 때 사용한다.
사용자 정의 태그의 값을 가변적으로 변경할 수 있다.

• 컴포넌트 안(하위)에서 props 의 값을 직접 바꾸는 것은 금지되어 있다.
• 컴포넌트 밖(상위)에서 props 값을 바꾸는 것은 가능하다.

// props : title, desc
<Subject title="HTML" desc="HTML info"></Subject>
<Subject title="CSS" desc="CSS info"></Subject>

props 값은 읽는 것(read-only)만 가능하기 때문에
값을 변경하려면 state 속성으로 값을 변경해야 한다.

state

구현자의 관점이다.
props 의 값에 따라서
컴포넌트 내부적으로 사용하는 구현에 필요한 데이터가 달라진다.

class App extends Component {
  // 컴포넌트가 실행될 때 render 함수 보다 먼저 실행되서 초기화를 수행
  constructor(props){
    super(props);
    // 하드코딩 하지 않고 데이터를 객체안에 생성
    this.state = {
      contents:[
        {id:1, title:'HTML', desc:'HTML info'},
        {id:2, title:'CSS', desc:'CSS info'},
        {id:3, title:'JavaScript', desc:'JavaScript info'}
      ]
    }
  }
  render() {
    return (
      <div className="App">
      	// state 의 값을 사용하는 방법
        <TOC data={this.state.contents}></TOC>
      </div>
    );
  }
}

state 값 변경

state 값을 동적으로 변경하면 react 가 변경된 값을 인식하지 못한다.

• this.state.mode = 'init';

이미 컴포넌트가 생성된 다음 state 값을 변경하려면
이벤트 핸들링을 통해 상위 컴포넌트의 state 값을 호출하여 값을 변경한다.
this.setState 함수 안에 변경하고 싶은 값을 객체 형태로 넣는다.

onClick={function(e){
  console.log(e);
  e.preventDefault();

  // setState : state 의 값을 변경하는 방법
  this.setState({
    mode:'init'
  });
}.bind(this)}

props 와 state

외부의 props 와 props 에 따라서 실제로 구현하는
내부의 state 의 정보가 철저하게 분리되어
양쪽의 편의성을 도모하는 것이 리액트의 핵심이다.

• 상위 컴포넌트의 상태를 하위 컴포넌트로 전달할 때 state 값을 사용하고,
• 상위 state 의 값을 하위 컴포넌트에게 전달할 때는 props 을 통해 전달한다.
• 값을 state 로 만들고 props 로 전달한다.
  
  

props, state 의 값이 바뀌면

state 값을 갖고 있는 컴포넌트의 render() 함수가 다시 호출되고,
각 하위 컴포넌트 안에 있는 render() 함수도 다시 호출되면서
페이지가 전환되는 현상이 발생한다.

key

여러개의 요소를 자동으로 생성하는 경우 사용한다.
각각의 태그들을 react 가 구분할 수 있도록 식별자key 속성값을 가지고 있어야 한다.
react 의 필요로 인해 내부적으로 넣어주는 값이다.

// key : key={data[i].id}
<li key={data[i].id}>
  <a href={"/content/"+data[i].id}>
    {data[i].title}
  </a>
</li>