React(4) 컴포넌트에게 state 값 전달하는방법

목차

1. props란

2. props사용법

3. 실습

---

props란

• 우선, 리액트도 여느 컴퓨터 언어들과 같이,
  다른 함수(컴포넌트)안에서 선언된 변수(state)를,
  다른 함수(컴포넌트)에서 사용하지 못한다.

 

python의 변수사용 예

# python의 변수 사용 예
num1 = 1 # 변수 num1 초기화

def plusOne():
    num2 = 2 # 변수 num2 초기화
    num1 = num2 # "지역"변수 num1에 2를 할당
    print("함수 안에서의 num1 : ",num1) # 출력

plusOne() # 함수 호출
print("함수 밖에서의 num1 : ",num1) # 출력

# 함수 안에서의 num1 :  2
# 함수 밖에서의 num1 :  1

C언어의 변수 사용 예

//c언어의 변수 사용 예
#include <stdio.h>
int num1 = 1;    // 전역 변수 선언 및 값 초기화

void printGlobal()
{
	int num1 = 2;
    printf("함수 안에서의 num1 : %d\n", num1);    // main 함수에서 저장한 값이 계속 유지됨
}

int main()
{
    printGlobal();    // printGlobal 함수에서 전역 변수 num1의 값 출력
	printf("함수 밖에서의 num1 : %d\n", num1);    // main 함수에서 전역 변수 num1의 값 출력

    return 0;
}

// 함수 안에서의 num1 : 2
// 함수 밖에서의 num1 : 1

따라서, 다른 컴포넌트에게 state들을 넘겨줄 수 있게 끔 하는게, props문법이라고 한다.

※ 주의 할 점!!
부모 component의 state를, 자식 컴포넌트에게 넘겨 주는 것만 가능!
(자식 component의 state를 부모 component로 넘겨 주는 것 불가능!
똑같은 자식 component끼리의 state 전송 불가능!)

-> 따라서, state가 여러 컴포넌트에서 쓰일경우, 제일 부모 컴포넌트에 정의를 해놓아야 props로 전달할 수 있다.

---

사용방법

1. 넘겨주려는 자식컴포넌트 괄호에, 파라미터작명 = { state이름 } 작성한다.
(보통! 파라미터작명값은 state이름과 동일하게 함. 하지만 헷갈릴 수 도 있어, 필자는 다르게 쓰겠음.)

ex) <Modal name_props={name}></Modal>

import "./App.css";
import { useState } from "react";

function App(){
  let [name,setName] = useState(["카리나","카즈하","아이린"])
  return(
    <div>
      <Modal name_props={name}></Modal>
    </div>
  )
}
export default App;

 

2. 받으려는 컴포넌트에 파라미터값을 작명 한 후(보통 props로 함), .파라미터작명 으로 사용!

import "./App.css";
import { useState } from "react";

// function App(){
//  let [name,setName] = useState(["카리나","카즈하","아이린"])
//  return(
//    <div>
//      <Modal name_props={name}></Modal>
//    </div>
//  )
// }

function Modal(props){
  return(
    <div>
      {props.name_props}
    </div>
    
  )
}

export default App;

(참고 1) props는 밑의 코드와 같이, 무한히 전송이 가능하다.
<Modal name={name} age={age} address={address}>

(참고 2) 꼭 state만 전송할 수 있는건 아니다. 
<Modal 글제목={변수명}> 일반 변수 및 함수 전송도 가능
<Modal 글제목="강남우동맛집"> 일반 문자전송은 중괄호 없이도 가능

---

 

- 다양한 색의 컴포넌트창이 필요할때

import "./App.css";
import { useState } from "react";

function App(){
  let [name,setName] = useState(["카리나","카즈하","아이린"])
  return(
    <div>
      <Modal color={"blue"} name_props={name}></Modal>
    </div>
  )
}

function Modal(props){
  return(
    <div style={{backgroundColor : props.color}}>
      {props.name_props}
    </div>
    
  )
}

export default App;

 

- 자식 컴포넌트의 글수정버튼을 누르면, 부모 컴포넌트의 글제목 바꾸기

import "./App.css";
import { useState } from "react";

function App(){
  let [name,setName] = useState(["카리나","카즈하","조이"])
  return(
    <div>
      {name}
      <Modal setname_props={setName}></Modal>
    </div>
  )
}

function Modal(props){
  return(
    <div>
      <button onClick={()=>{
        props.setname_props(["장규리","김채연","지수"]);
      }}>바꾸기</button>
    </div>
    
  )
}

export default App;

 

- 부모 컴포넌트의 글을 누르면, 그 글이 자식 컴포넌트에 뜨게끔 해보기

import "./App.css";
import { useState } from "react";

function App(){
  let [name,setName] = useState(["카리나","카즈하","조이"])
  let [show,setShow] = useState(false)
  let [num,setNum] = useState("nothing")
  return(
    <div>
      {name.map(function(a,i){
        return(
        <div key={i} onClick={function(){
          setShow(true)
          setNum(i)
        }}>
          {a}
        </div>
        )
      })}
      {
        show == true ? <Modal name={name} num={num}></Modal> : <div className="modal"></div>
      }
    </div>
  )
}

function Modal(props){
  return(
    <div className="modal">
      {props.name[props.num]}
    </div>
  )
}

export default App;