KimMinJun
Coding Note
KimMinJun
전체 방문자
오늘
어제
  • 분류 전체보기 (486)
    • ALGORITHM (11)
      • 정렬 (6)
      • 최단경로 (1)
      • 자료구조 (1)
      • 슬라이딩 윈도우 (1)
      • etc (2)
    • Git (5)
    • Web (24)
      • Vanilla JS (13)
      • TS (2)
      • React (7)
      • ETC (1)
    • React 공식문서 (번역, 공부) (11)
      • Quick Start (2)
      • Installation (0)
      • Describing the UI (9)
      • Adding Interactivity (0)
      • Managing State (0)
      • Escape Hatches (0)
    • Next.js 공식문서 (번역, 공부) (3)
      • Getting Started (2)
      • Building Your Application (1)
    • PS (431)
      • 백준 (187)
      • Programmers (104)
      • CodeUp (21)
      • STL (3)
      • 제코베 JS 100제 (50)
      • SWEA (0)
      • LeetCode (65)
    • IT (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 관리

공지사항

인기 글

태그

  • 다이나믹 프로그래밍
  • tree
  • codeup
  • 정렬
  • C++
  • LeetCode
  • 수학
  • recursion
  • 제코베 JS 100제
  • string
  • Level1
  • 백준
  • Level 1
  • C
  • Level 2
  • js
  • 그래프
  • 문자열
  • programmers
  • Level 0

최근 댓글

최근 글

hELLO · Designed By 정상우.
KimMinJun
React 공식문서 (번역, 공부)/Describing the UI

Passing Props to a Component

React 공식문서 (번역, 공부)/Describing the UI

Passing Props to a Component

2023. 5. 8. 04:57

React 컴포넌트들은 props를 사용하여 서로 통신한다. 부모 컴포넌트가 props로 자식 컴포넌트에게 정보를 전달할 수 있다.

 

 

컴포넌트에 props 전달

다음과 같은 코드에서는 부모 컴포넌트인 Profile이 자식 컴포넌트인 Avatar에게 props를 전달하지 않는다.

export default function Profile() {
  return (
    <Avatar />
  );
}

만약 Avatar에게 부모 컴포넌트인 Profile의 어떤 정보를 넘겨주고 싶다면 다음과 같이 전달해줄 수 있다.

 

 

1단계: 자식 컴포넌트에 props 전달

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

Avatar에게 person이라는 prop으로 객체와 size라는 prop으로 100을 전달해주었다.

 

 

2단계: 자식 컴포넌트 내부의 props 읽기

자식 컴포넌트인 Avatar에서 부모 컴포넌트가 전달해준 person과 size의 값을 다음과 같이 읽어들여서 사용할 수 있다.

function Avatar({ person, size }) {
  // person and size are available here
}

이 때, 부모 컴포넌트에서 지정한 props의 이름을 그대로 써주어야 매핑이 되어 그 prop을 가져다 쓸 수 있다.

 

 

 

 

props는 컴포넌트에 대한 유일한 인자이다. 그리고 props는 객체이다. 그렇기 때문에 위 코드에서도 인자에 {person, size}와 같이 객체로 받아온 것이다. 만약 props가 너무 많거나, 다른 변수에 값을 넣어서 사용하고 싶다면 다음과 같이도 사용할 수 있다.

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

 

 

위의 예시가 가능한 이유는, 말했듯이 props가 객체이기 때문이다. 우리는 객체에서 어떤 key에 대한 value 값에 접근할 때 obj.key1 과 같은 식으로 접근한다. 부모 컴포넌트인 Profile에서 person과 size를 한 객체인 props에 key와 value 쌍으로 넣어서 자식 컴포넌트에서 객체에서 key에 대한 value 값을 얻는 방식인 것이다.

 

 

props의 기본값 지정

부모 컴포넌트에서 값을 지정하지 않았지만 자식 컴포넌트에서 기본값으로 필요하다면 다음과 같이 선언하여 사용할 수 있다.

function Avatar({ person, size = 100 }) {
  // ...
}

 

 

위와 같은 size prop은 부모 컴포넌트에서 size prop을 지정해주지 않았거나, size={undefined}로 전달해주었다면 사용한 기본값이다. 만약 부모 컴포넌트에서 size={null}이나 size={0} 으로 넘겨주었다면 falsy한 값임에도 불구하고 하나의 값으로 쳐서 기본값이 사용되지 않는다.

 

 

JSX 전개 구문으로 prop 전달

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

 

 

위의 코드에서 Profile의 모든 props를 똑같이 자식 컴포넌트인 Avatar에 모두 전달한다. 이러한 경우에는 간결하게 전개구문을 이용해서 전달할 수 있다.

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

 

저작자표시 (새창열림)

'React 공식문서 (번역, 공부) > Describing the UI' 카테고리의 다른 글

Rendering Lists  (0) 2023.05.15
Conditional Rendering  (0) 2023.05.14
JavaScript in JSX with Curly Braces  (2) 2023.05.08
Writing Markup with JSX  (0) 2023.05.07
  • 컴포넌트에 props 전달
  • 1단계: 자식 컴포넌트에 props 전달
  • 2단계: 자식 컴포넌트 내부의 props 읽기
  • props의 기본값 지정
  • JSX 전개 구문으로 prop 전달
'React 공식문서 (번역, 공부)/Describing the UI' 카테고리의 다른 글
  • Rendering Lists
  • Conditional Rendering
  • JavaScript in JSX with Curly Braces
  • Writing Markup with JSX
KimMinJun
KimMinJun
Coding NoteKimMinJun 님의 블로그입니다.

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.