[React] 6. props

이전 글 ▼

0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅

1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX

2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object)

2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용)

3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component)

4. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 4. 동적인 UI 제작하기

5. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 5. 반복되는 부분 축약하기 (map)

 

 

컴포넌트를 만들었을때 App(){} 내부에서 정의한 state나 여려 변수 등 데이터가 필요한 경우가 있다.

이를 위해서는 props를 사용해야한다.

 

 

1. props 알아보기

 

먼저 App과 컴포넌트의 위치를 살펴보자.

function App(){
  let [foo, setFoo] = useState(0)
  return(
    <>
      <컴포넌트/>
    </>
  )
}

function 컴포넌트(){
  return(
    <>
      ...
    </>
  )
}

위처럼 두 컴포넌트 정의 함수는 형제 위치에 존재한다.

 

JS의 영역 개념에 주목을 하였을 때

형제 위치에 존재하는 서로 다른 함수 내 데이터는

송수신이 불가능하기 때문에

 

즉, functoin App의 내부에 존재하는 변수, state 등은

일반적인 방법으로 제작한 funcion 컴포넌트에 데이터를 전달할 수 없다.

 

 

하지만 다시 위의 코드를 살펴보면

html로 렌더링할 때에는

<App>   <컴포넌트/>   </App> 의 형태이므로

App이 부모, 컴포넌트가 자식인 관계이다.

 

이때에는 부모 컴포넌트의 데이터를 자식 컴포넌트로 전송해줄 수 있는데

이것을 가능하게 해주는 것이 바로 props 문법이다.

 

 

2. props 활용하기

 

단계

1. 자식 컴포넌트 태그 조작

2. 자식 컴포넌트 function 조작

 

1) 자식 컴포넌트 태그 조작

자식 컴포넌트의 태그에

" props명 = 데이터 "의 형태로 적어준다.

이때 데이터로 변수, state 등을 전달할 때에는 {변수 명}, {satate 명}과 같은 형태로 전달한다.

또한 일반 문자열의 경우 "문자열"로 전송하면된다.

 

예시

function App() {
  let [music, setMusic] = useState({"title": ... , ...})
  return(
    <div>
      <Modal music={music}/>
    </div>
  )
}

 

 

2) 자식 컴포넌트 function 조작

자식 컴포넌트 function의 props를 파라미터로 지정한다.

이때 파라미터의 이름은 임의로 지정하여도 무관하다.

 

예시

function Modal(props){
  return(
    <div className="modal-container">
      ...
      <div className="modal-title">{props.title}</div>
      ...
    </div>
  )
}

 

위의 예시에서 볼 수 있듯, props 문법은 함수의 파라미터 그 자체이다.

따라서 객체 state를 전달받았을 때 내부 요소에 접근하는 것 또한 가능하다.

 

 

---

3. props로 여러 데이터를 전송할 때

props로 여러 데이터를 전송하는 것도 가능하다.

 

<컴포넌트 props명 = 데이터, props명2 = 데이터 >와 같이

보낼 props들을 나열하면 된다.

 

전송된 데이터를 컴포넌트 function에서 매개변수로 등록할 때 2가지 방법이 존재한다.

 

1) 따로 따로 받기

props를 하나씩 그대로 받아오기 위해서는

자식 컴포넌트 태그에서 정의한 props명을

자식 컴포넌트 function의 파라미터로 중괄호{ }로 감싼 형태로 나열하여 등록하면된다. (순서 무관)

 

예시

function App(){
  return(
    ...
    <컴포넌트 data1="1" data2="Hello" />
    ...
  )
}


function 컴포넌트({data1, data2}){
  return(
    <div>
      <div>{data1}</div>
      <div>{data2}</div>
    </div>
  )
}

 

 

2) 한 번에 받기

하나의 파라미터만 등록하여도 여러 props들을 전달받을 수 있다.

이때는 전달받은 데이터들이 객체의 형태로 저장되어 있다.

 

예시

function App(){
  return(
    ...
    <컴포넌트 data1="1" data2="Hello" />
    ...
  )
}

// props는 {"data1":1, "data2":"Hello}의 형태로 저장되어있다.
function 컴포넌트(props){
  return(
    <div>
      <div>{props.data1}</div>
      <div>{props.data2}</div>
    </div>
  )
}

 

결과화면 (두 방법 동일한 결과)