[ TIL 35 ] React - props,state

state

state는 상태라는 뜻으로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값이다.
화면에 보여줄 컴포넌트의 UI 정보(상태)를 지니고 있는 객체이고,
해당 컴포넌트 내에서 정의하고 사용하며 데이터가 변경 될 수도 있다.

# state의 특징

• 값이 바뀔때마다 컴포넌트가 리랜더링된다.
• 값을 바꾸고싶을땐 setState를 사용하면 바뀐 값으로 사용 가능하다.
• setState를 사용하지 않고 값을 바꾸면 리랜더링 되지 않는다.
• state는 자기자신이 들고있는 값이며, 값을 변경 할 수 있다.

더 쉽게 이해해보자 🧐

state는 값이 바뀔 내용의 초기값을 만들어줄때 사용되고,
값이 바뀌는걸 설정하고 싶으면 setState를 만들어서 바뀔 값을 가져온다.

• state은 super(); 밑에 자리에 작성해준다.
• 객체 안의 key 이름은 원하는대로 설정할 수 있습니다.

# state 예제 (state 초기값 설정)

class State extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red' //key:value
    };
  }

# state 예제 (Event 활용)

import React, { Component } from 'react';

class State extends Component {
  constructor() {
    super();
    this.state = {
      color: 'red',
    };
  }

  handleColor = () => {
    this.setState({
      color: 'blue'
    })
  }

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>Class Component | State</h1>
        <button onClick={this.handleColor}>Click</button>
      </div>
    );
  }
}

export default State;

💁‍♀️ 코드를 해석해보자면

• <button> 요소에서 onClick 이벤트 발생
• this.handleColor , 즉 현재 컴포넌트(State)의 handleColor 함수 실행
• handleColor 함수 실행 시 setState 함수 실행 - state의 color 값을 'blue' 로 변경
• render 함수 호출
• 바뀐 state 값을 반영하여 <h1> 태그 글자 색상 변경

# state를 실제로 사용해보자!

(초기값만들어주는 부분, 바뀔값 만들어주는 부분)

class Feed extends React.Component {
  constructor() {
    super();
    this.state = { //내부 컴포넌트 초기상태값 만들어주기 
      color: "#0094f64b",
      newComment: "",
      comments: [[{ id: 0, userId: "", comment: "" }]],
    };
  }

  commentValue = (e) => {
    this.setState({ //이벤트가 들어왔을때 바뀔값 만들어주기
      newComment: e.target.value,
    });
  };

---

Props

Props는 컴포넌트의 속성값이라는 뜻을 가지고 있다.
부모컴포넌트로 부터 물려 받은 데이터를 가지고 있는 속성이다.
그래서 props를 통해서 부모 컴포넌트와 소통할 수 있다.

# Props의 특징

• 부모 컴포넌트에서 전달하는 props가 바뀌면 자동으로 업데이트 된다.
• 컴포넌트의 props는 객체이다.
• props는 읽기전용이다.

내가 계속 몰랐던 부분 😭

부모 컴포넌트의 속성값을 자식컴포넌트한테 넘겨줄때
<Title title="HELLO!" sub="Welcome, dodohee blog"></Title>

자식컴포넌트가 부모컴포넌트의 속성값을 사용해줄때
<h1>{this.props.title}</h1>

# props 예제 (기초 ver)

class Title extends Component {
  render() {
    return (
      <header>
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </header>
    );
  }
}

class Main extends Component {
    render() { 
        return ( 
            <div>
                <Title title="HELLO!" sub="Welcome, dodohee blog"></Title>
            </div>
         );
    }
}
 
export default Main;

# props 예제 (state값을 지정해준 후)

//Parent.js

import React from 'react';
import Child from '../pages/Children/Children';

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1> 
      			//부모컴포넌트에 프롭스하는 법
	<Child titleColor={this.state.color}/>
      </div>
    );
  }
}

export default State;

이렇게 부모컴포넌트 내부에 state값을 만들어주고,

// Child.js

import React from 'react';

class Child extends React.Component {
  render() {
// console.log(this.props); 항상 props가 잘 되고 있는지 확인하기 위해 콘솔

    return (
      <div> // 자식컴포넌트에 프롭스 하는법
        <h1 style={{color : this.props.titleColor}}>Child Component</h1>
      </div>
    );
  }
}

export default State;

# props 예제 (Event 활용)

// Parent.js

import React from 'react';
import Child from '../pages/Children/Children';

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  handleColor = () => {
    this.setState({
      color: 'blue'
    })
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
	<Child titleColor={this.state.color} changeColor={this.handleColor}/>
      </div>
    );
  }
}

export default State;

// Child.js

import React from 'react';

class Child extends React.Component {
  render() {
		// console.log(this.props);
    return (
      <div>
        <h1 style={{color : this.props.titleColor}}>Child Component</h1>
	<button onClick={this.props.changeColor}>Click</button>
      </div>
    );
  }
}

export default State;

💁‍♀️ 코드를 해석해보자면

• <button> 요소에서 onClick 이벤트 발생
• 이벤트 발생 시 this.props.changeColor 실행
• props 객체의 changeColor, 즉 부모 컴포넌트로부터 전달받은 handleColor 함수 실행
• handleColor 함수 실행 시 setState 함수 호출 - state의 color 값을 'blue' 로 변경
• render 함수 호출
• <Child /> 컴포넌트에 변경된 state 데이터(this.state.color) 전달
• this.props.titleColor 를 글자 색상으로 지정하는 <h1> 타이틀 색상 변경