저번 포스팅까지 페이지 이동에 대해 배웠다.
그럼 이제 페이지를 이동시킬 수는 있는데
상위 컴포넌트가 하위 컴포넌트에 값을 전달해줘야,
하위 컴포넌트가 그걸 받고, 렌더링을 해줄것이 아닌가!!
그걸 하기 위해서 props라는것이 필요한 것이다.
뉘에뉘에~~ 그거때문에 쓰는 건 알겠고,
그럼 어떻게 쓰는건가요!??
👉🏻 Props(프로퍼티)란!??
Props= Properties 의 줄임말이라고 생각하면 된다.
- 위의 사진처럼 프로퍼티는 상위 컴포넌트가
하위 컴포넌트에 값을 전달할 때 사용. (단방향 데이터 흐름) - 프로퍼티는 수정할 수 없다!! (자식입장에선 읽기 전용)
- 함수에 전달하는 매개변수
❓ 그럼 Props를 어떻게 사용하나유
일단 jsx문법상으로 프로퍼티에 문자열을 전달할땐 (" "),
문자열 외의 값을 전달할때는 중괄호({ })를 사용!!
방법 1 : 1개의 프로퍼티만 넘길때
예시로 3개의 컴포넌트를 만들어보자.(Header, Main, Footer)
상위 컴포넌트 App에서
"name"이라는 이름, "승현"이라는 값을 가지고 있는
프로퍼티를 Main 이라는 하위 컴포넌트에 넘겨보자!!
👉🏻 App.js를 보면
App.js에서 Main에 name="승현" 이라는 프로퍼티를 넘겨주어
Main컴포넌트에서 읽을 수 있도록 해준다.
👉🏻 Main.jsx에서는
App.js에서 전달받은 값을 Main에서 받아와서
그 값을 props매개변수에 넣고, 중괄호를 사용하여
{props.name}을 통해 받아올 수 있는 것이다.
결과는 다음과같이 이름이 잘 받아와진 것을 확인할 수 있다!!
방법 2 : 2개의 프로퍼티를 넘길 때
만약 props 를 이름뿐만 아니라
색, 나이 등등 더 넣어야할때
상위컴포넌트 App에서
하위컴포넌트 Main에 전달을 해보자!!
👉🏻 App.js를 보면
App.js에서 Main컴포넌트에 name, color
두개의 프로퍼티를 넘겨주려고 한다.
name="승현" color="skyblue"
👉🏻 Main.jsx에서는
상위 컴포넌트인 App.js에서 넘겨준 name과 그 값,
color과 그 값 두개를 받아와서 Main컴포넌트에서 적용
결과로 아래와 같이 name은 승현, color는 하늘색으로
잘받아와진 것을 확인할 수 있다!!
방법 3 : 숫자 프로퍼티를 넘길 때
props에 숫자를 넘겨야할 일도 있을 것이다.
숫자도 무조건 중괄호({ })안에 넣어줘야한다!
문자열 이외에는 다 중괄호 안에 넣어준다 생각!!!
상위컴포넌트 App에서
하위컴포넌트 Main에 전달을 해보자!!
👉🏻 App.js를 보면
App.js에서 Main컴포넌트에 name, color, age
세개의 프로퍼티를 넘겨주려고 한다.
name="승현" color="skyblue", age={25}
👉🏻 Main.jsx에서는
상위 컴포넌트인 App.js에서 넘겨준 name과 그 값,
color과 그 값 , age와 그 값
세개를 받아와서 Main컴포넌트에서 적용
결과로 아래와 같이 name은 승현, color는 하늘색으로,
age는 25로 잘받아와진 것을 확인할 수 있다!!
✋🏻 근데요~~ 저는 컴포넌트에 props를 넣고싶긴한데요~
기본값으로 넣어주는 방법은 없나요!??
컴포넌트에 props 기본값을 설정하고 싶을때는
defaultProps를 설정해주면 된다!
예를 들어 위의 예제에서 name프로퍼티가 없을 때,
'디폴트'라는 값을 사용하여 처리하게 해줘보자!
상위컴포넌트 App.js를 보면, name이라는 프로퍼티를
Main 컴포넌트에 안넣어주었다.
그럼 Main컴포넌트에서는 상위컴포넌트인 App에서 받아온
name프로퍼티가 없는데 어떡하지..?
어,,!! 프로퍼티 기본값을 설정해줬네!? 저거로 쓰면되겠다!!
하고 생각을하여 기본값을 설정해주게 된다.
위처럼 defaultProps를 활용하여 name의 기본값을
'디폴트' 라는 임의의 값으로 설정해주어
상위컴포넌트에서 받아올 프로퍼티가 없을때 저걸 사용!!
위와 같이 '디폴트'가 props.name 자리에 들어가는 것을
확인할 수 있다!
👍🏻 프로퍼티는 불리언타입,
즉 true, false로 사용할 수도 있다!!
예시를 통해 바로 알아봐보자!!
App.js에서 isStudent라는 프로퍼티 이름을
Main컴포넌트에 중괄호 없이 이름만 선언해준다.
Main컴포넌트에서 message라는 변수에
isStudent가 true인 경우 "학생", false인 경우 "학생 아님"을
넣어주어 그 message값을 읽을 수 있도록 하였다.
여기서 Main 매개변수에 isStudent는 JS표현식이기 때문에
중괄호를 붙여서 {isStudent}로 감싸서 매개변수에 넣어줘야한다.
아래와 같이 학생이 출력되는것을 볼 수 있다.
그럼 false는 어떨때 나오는지 궁금해질텐데,
false는 상위컴포넌트 App에서 isStudent라는 프로퍼티를
생략하게 되면 false로 처리된다.
위처럼 Main 컴포넌트에서 isStudent를 지워주면
false로 처리되어 (학생 아님)이 출력될 것이다.
