[React] 2 props로 컴포넌트에 값전달하기

저번에 만들었던 파일에서 부터 이어서 시작~

 

저번에 썻던 Hello컴포넌트에 props를이용해서 값을 전달해줄것이다.

Hello컴포넌트를 import 하고있는 App.js에서 키값을name으로 하고 값을 전달해준다

키값과 밸류값형태로 전달된다.

이제 값을 보내줬으니 Hello 컴포넌트에서 값을 받아서 넣어주면된다

Hello 컴포넌트에서 파라미터에 변수를넣고 변수.키 를넣어주면 App에서 보내준 value를 받을수있다.

변수의 이름은 아무거나 써도 상관없지만 남들이 다 props라고 쓰는 이유가 있을테니 나는 그냥 쓰겠다.

쓰던거에 계속 덕지덕지 붙이다보니 보기에 좋지는 않지만

어쨋든 props로 전달된값이 잘 출력되는걸 확인할수있다.

 

이번에는 app.js 에서 color 키에 색을 담아서 보내주고 Hello.js에서 받아서 style에 추가해주는 예제이다

function App() {
  return (
    <div className="App">
      <Hello name="it's Me" color="yellow"/>
    </div>
  );
}

function Hello(props){
    const leave = `전 이 세상의 모든 굴레와 속박을 벗어 던지고 
                 제 행복을 찾아 떠납니다! 여러분도 행복하세요오오!!!`
    const style = {
        backgroundColor:'Red',
        fontSize:24,  // px이 기본단위
        color:'white'
    }
    return(
        <>
            <div className='Hello' style={{color: props.color}}>{props.name}안녕하세요 여러분</div>
            <div style={style}>{props.name}안녕히계세요 여러분</div>
            {leave}
        </>
    )
}

props로 보내준 color를 받아서 사용할수있다.

 

props로 보내준값을 객체구조분해 할당으로 받아서 앞에 props. 을 붙이지않고 이용하는것도 가능하다.

function Hello({color,name}){
    const leave = `전 이 세상의 모든 굴레와 속박을 벗어 던지고 
                 제 행복을 찾아 떠납니다! 여러분도 행복하세요오오!!!`
    const style = {
        backgroundColor:'Red',
        fontSize:24,  // px이 기본단위
        color:'white'
    }
    return(
        <>
            <div className='Hello' style={{color: color}}>{name}안녕하세요 여러분</div>
            <div style={style}>{name}안녕히계세요 여러분</div>
            {leave}
        </>
    )
}

키값인 color와 name을 변수명으로 설정해서 객체 구조분해할당으로 props를 받아왔다.

결과화면은 이전과 똑같이 나온다.(예쁜화면은 아니라서 두번은 안쓸게요..)

 

propsdefault 값

props를 보내주지 않을때에도 props를 사용하려면

props를 사용하는 컴포넌트에서 defaultProps를 설정하면된다.

function Hello({color,name}){
    const leave = `전 이 세상의 모든 굴레와 속박을 벗어 던지고 
                 제 행복을 찾아 떠납니다! 여러분도 행복하세요오오!!!`
    const style = {
        backgroundColor:'Red',
        fontSize:24,  // px이 기본단위
        color:'white'
    }
    return(
        <>
            <div className='Hello' style={{color: color}}>{name}안녕하세요 여러분</div>
            <div style={style}>{name}안녕히계세요 여러분</div>
            {leave}
        </>
    )
}
Hello.defaultProps = {
    name:"이름없음",
    color:"tomato"
}

App.js에서 보내주는 값을 지우면 디폴트로 되있던  props값들이 적용된다.

 

 

컴포넌트사이에 있는 값을 조회하고싶을때에는 props.children을 사용하면 조회가 가능하다

 

props.children을 사용하기위해 새로 컴포넌트를 만들었다.

import React from 'react'
function Wrapper(){
    const style ={
        border: "2px solid black",
        padding:"16px",
    };
    return(
        <div style={style}>

        </div>
    )
}
export default Wrapper

그리고 이걸 app.js에서 사용해서 Hello컴포넌트를 감싸준다.

function App() {
  return (
    <div className="App">
      <Wrapper>
        <Hello name="ME" color="turquise"/>
        <Hello color="pink"/>
      </Wrapper>
    </div>
  );
}

이렇게 사용하고 화면을 확인해보면  Hello컴포넌트부분이 안보이게된다.

출력이미지

그래서  props.children으로 Wrapper 컴포넌트안에있는 Hello컴포넌트를 받아서 다시 렌더링해줘야한다

function Wrapper({children}){
    const style ={
        border: "2px solid black",
        padding:"16px",
    };
    return(
        <div style={style}>
            {children}
        </div>
    )
}

태그사이의 요소는children이라는 키로 저장되기때문에

children으로 구조분해할당으로 받아서 변수를 사용한것이다.

이렇게 해주면 Wrapper컴포넌트 안의 안보이던 Hello 컴포넌트가 보이게된다.