React - State,Props,Event

Steve·2021년 9월 25일
React
0

state, props, Event

학습목표

  1. props의 개념에대해 한문장으로 설명할수있다.
  2. state의 개념에대해 한문장으로 설명할수있따
  3. state를 이용해서 ui를 구성할수있다
  4. 이벤틀르 통해 state를 변경할수있다
  5. props의 개념을 이용해 부모 요소의 state를 자식요소에 반영할 수 있따
  6. props의 개념을 이용해 자식에서 일어난 이벤트로 부모의 state값을 바꿀수있다(state끌어올릴기)

props

propeprty의 줄임말
모든 컴포넌트가 가지고 있는 내장 객체
속성. 부여받는다. 성별 이름. 부모님이 지어주신것. 맘대로 못바꿈

해당 컴포넌트가 가지고 있는 props를 보는 법 : this.props 조금 뒤에 더 설명
props는 부모에서 자식으로 전달해주는 속성이다
자식에서는 이걸 바꿀순 없고 읽을수만 있다
자바스크립트라면 어떤것이든 넘길수있따.(스트링,넘버,불리언,객체,함수 등)

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

class Parent extends React.Component {
  introduce = () => {
    alert("hello");
  }
  
  render(){
    return 
    <div>
      <Child name="seonggoo" age={0} introduce={this.introduce} />
        // introduce라는 이름으로 저 값을 넘기겠다.
      <Child name="kang" age={1}/>;// 속성을 아무거나 넣을수있다.
    </div>
    // props는 전달할 수 있는 제한이 없다.(위처럼 함수도 넘길수 있다.
    // string을 제외한 나머지 것들은 중괄호 안에 넣어줘야 자바스크립트로 인식됨.
    // 바껴야 하는 부분들을 props로 전달하면서 같은 컴포넌트의 형식은 유지 
  }
}

export default Parent;
import React from 'react';

class Child extends React.Component {
  render(){
    console.log(this.props);// 부모에서 받은것을 활용하려면? -> 객체에 접근하듯이 활용
    return 
    // 부모에서 함수를 만들어서 자식한테 넘겨줄 수 있다.
    <div>  
      <h1 onClick={this.props.introduce}>
        Hello {this.props.name} Age : {this.props.age}
      </h1>;
    </div>
   
  }
}

export default Child;

state

props와 마찬가지로 얘도 객체

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

class Parent extends React.Component {
  render(){
    return <Child />;
  }
}

export default Parent;

state만드는 법

this?

this를 사용하는 순간 그 this를 감싸고 있는 컴포넌트(아래Child에선 Child가 this겠죠)

import React from 'react';

class Child extends React.Component {
  constructor() {
    super();
    this.state = {
      titleColor : "blue";
    };
  }
  
  changeColor = () => { 
    // 컴포넌트 안에선 error function으로 만들어줘야 함수 안에서의 this가 자기 컴포넌트를 가리킨다.
    // constructor 안의 키값과 겹치지만 가장 마지막것으로 덮어 씌워진다.
    // render안에서 함수 실행코드 입력
    this.setState({ //  항상 setState를 통해 값을 변경해줄수있다. 아래처럼하면 render함수가 실행 안됨
      // 뜻 : "우리 지금 state바꿨고 더가 업데이트 해주면돼"라는 명령어
    	titleColor : "red";
    })
    this.state.titleColor = "red"; // 콘솔 찍었을때 값은 바뀌지만 render실행이 안돼서 색변경은 안이뤄짐
    
    // 이 함수를 통해서 state를 바꾼다.
    // 이미 React.Component가 만들어놓은 함수라 가져다가 쓰는것.
  }
  
  render(){
   console.log("state >>>>" , this.state); // {titleColor : "red"}
   return 
    <div> // 선언적인 코딩. 이렇게 선언해주면 내부적인 동작은 위에서 알아서 행해준다.
      <h1 style={{ color : 'red' }}>hello world</h1>;
      <button onClick={this.changeColor}>Change Color!</button>
    </div>
// 만약 위의줄을 기존 방식데로 했다면, 버튼을 누르면, document.getElementById 해서 <h1>을 가져온 뒤 개 안의 스타일의 컬러값 바꾼다. 처럼 긴 과정을 거쳐야한다. 이모든 걸 생략하게 해줌.<-- 리액트 쓰는 이유
// 선언적으로 개발자가 어떻게 생겼는지 말만 해주면됨.어떻게 생겼는지 말해줄때 state와 props를 이용해서 말해줌.그러면 자동으로 리액트가 업데이트 화면처리를 해줌
// 자동으로 해주지만 이명령을 따로 해주긴 해줘야함-> setState를 통해서.

	
   // color : this.state.titleColor로 표현 가능
// 이게 왜 생겼을까? -> 유지보수 위해. state안의 'red'만 다른 색깔로 변경해주면 나머지 것들에도 모두 적용되는 편리성

// 안에 있는 중괄호는 '얘는 객체야' 라는 뜻
// 밖에 있는 중괄호는 '얘는 자바스크립트야' 라는뜻
  }
}

export default Child;

왜 계속 render에서 console을 찍어 확인할까?

리액트가 화면을 그릴때 어떤함수를 호출하나?-> render 함수를 호출해서 화면그림

이벤트를 통해 state를 변경한다

  • 컴포넌트 안에서 함수를 만들땐 항상 Error function으로 만든다

정리

props는 부모에서 넘겨주는 애
state는 자기가 갖고있는거
constructor안에서 만들어줌

setState예시 한개더

import React from 'react';
import './Child.css'; // css적용시키기 위한 import

class Child extends React.Component {
  constructor() {
    super();
    this.state = {
      // boolean의 변수명 짓는 법  : is뭐뭐냐? yes or no
      isSwitchOn : false;
    };
  }
  
  toggleSwitch = () => { 
    // 토글로 클릭때마다 꺼졌다 켜졌다. 리팩토링해보자면? 아래를 보세요
    if(this.state.isSwitchOn){
      this.setState({
        isSwitchOn : false;
      })	  
    } else { 
      this.setState({
        isSwitchOn : true;
      })	  
    }
    
    // 위의 중복을 없애기 삼항연산자 사용
    this.setState({
      isSwitchOn : this.state.isSwitchOn ? "False" : "True" ;
      
      // 위처럼 삼항연산자에 boolean? 무조건 잘못된 코드!!! 아래처럼 바꿔라!!
      isSwitchOn : !this.state.isSwithOn;
    })
    
    
    this.setState({ // 토글 없이 계속 켜져있게함
      isSwitchn : true;
    })
    
  }
  
  render(){
   console.log("state >>>>" , this.state);
	const { isSwitchOn } = this.state; // 여러개가 있으면 아래처럼 적는다.
    const { isSwitchOn, color, toggle } = this.state;
    // const isSwitchOn = this.state.isSwitchOn; 을 간편하게 쓴것
    
    // 구조분해할당을 render함수 안에서 해주는 이유?
    // -> 함수바깥에서 함수 내의 값에 접근불가하다. 
    
    // switch가 켜져있으면 파란색
    // switch가 꺼져있으면 빨간색
    // 삼항연산자 이용 
   return {
    <div>// this.props.isSwitchOn이 아니라 this.state.isSwitchOn
      <h1 className={isSwitchOn ? SwitchOn : SwitchOff}>
     Switch : {isSwitchOn ? "On" : "Off"}</h1>
    // inline으로 스타일 넣으면 가독성 안좋다. 가장 우선순위가 높게 적용된다-> 스타일링은 css에서 하는게 좋다
     
      <button onClick={this.toggleSwitch}>Toggle Switch!</button>
    </div>
   }
  }
}

export default Child;

css에서는 string 표시할필요없음

.SwitchOn {
	color : red; 
}
.Switchff {
	color : blue;
}

구조 분해할당

this.state를 매번 적어줄 필요 없게된다.
객체를 표시할땐 중괄호로 하니까,
// this.state.isSwitchOn을 앞으로 isSwitchOn으로 작성 가능!
const { isSwitchOn } = this.state
// 중괄호 안에는 분해될 값
// 분해할 원본 객체를 적어준다.

부모가 가지고 있는 값을 자식에게 전달해주기

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

class Parent extends React.Component {
  
  //constructor 안에서 component 의 상태(state)를 저장해 둘 수 있다.
  constructor() {
    super();
    this.state = {
      isSwitchOn : false;
    };
  }
  // 부모의 state를 직접적으로 바꾸진 못하지만, 부모의 state를 바꾸는 함수를받아서 걔를 호출하면 됨
  toggleSwitch = () => { 
    this.setState({
      isSwitchOn : !this.state.isSwithOn;
    })
  }
  
  render(){
    return <Child isSwitchOn={this.state.isSwitchOn} toggleSwitch={this.toggleSwitch} />; // 자식한테 props로 넘겨준다는 뜻
    // 부모의 state를 직접적으로 바꾸진 못하지만, 부모의 state를 바꾸는 함수를받아서 걔를 호출하면 됨
  }
}

export default Parent;
import React from 'react';
import './Child.css';

class Child extends React.Component {  
  render(){
    
    console.log("props>>> ", this.props); 
// props ▶{isSwitchOn : false, toggleSwitch ; f}
// 자식한테 isSwitchOn이,toggleSwitch라는 것이 props로 넘어와서 사용할 수 있음
    
   return {
    <div>
      <h1 className={this.props.isSwitchOn ? SwitchOn : SwitchOff}>
       Switch : {this.props.isSwitchOn ? "On" : "Off"}
    // 그전 코드는 state에 있는것을 가져온거고
    // 지금은 props에 있는 값을 가져오는것
       </h1>
      <button onClick={this.props.toggleSwitch}>Toggle Switch!</button>
    // 나 자신이 가지고 있는 토글 스위치가 아니고, 나의 부모로부터 전달받은 props안에 있는 토글스위치라는 함수를 실행시킴
    // 이로써 자식에서 부모의 state를 바꿀수있게됨(직접적으로 못바꾸고 부모에서 만든 함수를 넘겨줌으로써)
    </div>
   }
  }
}

export default Child;

형제끼린 전달을 못한다.

위에서 아래로만!

내 자신에 있는걸 쓰는건 this.state blabla
부모로부터 받아오는건 this.props blabla

state 끌어올리기

가슴아프지만 자식들끼린 소로 소통을 하지 못한다.
싸웠나보다
그래서 부모를 통해 이야기를 주고 받는다.

정리

  1. props란?
    리액트 컴포넌트가 가지고 있는 속성.
    부모에서 자식으로전달
    읽기전용
    객체 형식으로 표현됨
  2. state란?
    컴포넌트가 갖고 있는 상태.
    객체 형식으로 표현됨
    내가 가지고있는, 컴포넌트가 가지고 있는것.
    상태는 바꿀수 있다 -> this.setState를 이요해서.
    바뀔때 render가 새로 되면서 화면이 새로 그려진다
    titleColor, isSwitchOn등을 이용해서 UI구성할때 많이 사용.
    자동으로 state가 변경되면 리액트가 ui를 업데이트 하게해줌.
    부모의 state를 바꿀수 잇음(부모에서 만든 함수를 이용해서)
    이런 state끌어올리기를 통해서 형제 컴포넌트들끼리 상호작용 가능케함
profile
Steve
Front-Dev
이전 포스트

React - react router, sass

다음 포스트

git

0개의 댓글