React

JSX에 값 넣고 props 전달하기

부모가 전달한 값을 props로 받아 같은 컴포넌트에 다른 내용을 표시합니다.

이럴 때 필요해요

공연 카드마다 다른 이름을 보여 줍니다.

어떻게 동작하나요?

JSX에서 고정 글자 대신 JavaScript 값을 표시하려면 중괄호를 사용합니다. <h2>{title}</h2>는 title의 값을 제목 안에 표시합니다.

부모는 <Concert title="재즈" />처럼 값을 전달할 수 있습니다. 자식 함수는 props라는 객체로 이 값을 받고 props.title로 읽습니다. 같은 컴포넌트에 다른 값을 주면 다른 공연 이름을 표시합니다.

props는 자식이 마음대로 수정할 값이 아닙니다. 다른 화면을 원하면 부모가 새 값을 전달하거나 상태를 갱신하는 흐름을 만듭니다. 상태는 이어지는 기초 노트에서 배웁니다.

코드 예제

동작을 설명하는 읽기 전용 예제입니다.

example.jsx

function Concert(props) {
  return <h2>{props.title}</h2>;
}
export default function App() {
  return <><Concert title="재즈" /><Concert title="클래식" /></>;
}

jsx · 읽기 전용6줄

같은 Concert 컴포넌트로 재즈와 클래식 제목을 각각 표시합니다.

자주 헷갈리는 포인트

따옴표 안의 문자열과 중괄호 안의 JavaScript 식을 구분합니다.
받은 props를 자식 안에서 직접 수정하지 않습니다.

내 말로 설명해 보기

새로운 공연 이름을 표시하려면 컴포넌트 함수를 복사해야 할까요?

생각할 단서 화면 구조와 부모가 전달하는 데이터 중 무엇이 달라지는지 보세요.

예시 답변 확인

설명에 들어갈 핵심

부모가 전달한 값을 props로 받아 같은 컴포넌트에 다른 내용을 표시합니다.
같은 Concert 컴포넌트로 재즈와 클래식 제목을 각각 표시합니다.

예시 답변

같은 Concert에 다른 title을 전달하면 됩니다. 공통 구조는 재사용하고 표시할 데이터만 바꿉니다.

문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.

공식 참고 자료

React · 컴포넌트에 props 전달하기 ↗

← React