부모-자식 요소 활용해보기
<App.js에 할아버지, 엄마, 자식 등 3개의 컴포넌트를 만들어 서로 연결해보기>
Child 컴포넌트는 '나는 자식입니다'를 출력, Mom 컴포넌트는 Child 컴포넌트를 호출, Grandpa 컴포넌트는 Mom 컴포넌트를 호출하면 되는데, 나는 Mom, Grandpa 컴포넌트가 그 자식 요소를 호출만 하는 데서 끝나지 않고 각각 '나는 엄마입니다', '나는 할아버지입니다'도 함께 출력하도록 해보고 싶었다.
- 처음으로 해본 것 (작동이 되지 않았음)
- 다시 해본 것 (제대로 작동!)
문제는 바로 return문을 멀티라인으로 썼기 때문에 일어났던 거였다. 컴포넌트에서 여러 개의 JSX 엘리먼트를 반환할 때에는 이를 하나의 부모 엘리먼트로 감싸야 한다! 강의에서도 말씀해 주셨던 부분!
내가 의도했던 대로 제대로 작동되는 것을 확인할 수 있었다! 확실히 HTML이랑은 느낌이 많이 다르다는 생각이 든다🤔🤔🤔
JSX(JavaScript + XML)
자바스크립트를 확장한 문법으로, 문서에서 return문 안에 있는 부분이다. HTML 태그는 .js 파일 안에서 쓸 수 없는데, 이 JSX를 통해 자바스크립트 안에서 html태그 같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있다.
1. 변수로 선언한 스타일 적용하기
return문 위에 변수를 선언한 뒤, 객체 형태로 스타일을 만들어준다. 그러고 나서 return문에서 해당 변수를 {변수명}으로 불러오면 적용된다!
2. 인라인 스타일 적용하기
따로 변수를 선언하지 않고 인라인에서 스타일을 적용하려면, 함수를 시작하겠다는 중괄호{}와, 객체임을 뜻하는 중괄호 {} 안에 스타일 내용을 감싸서 넣어준다. 코드의 재사용을 용이하게 하기 위해서는 1번 방법을 사용하는 것이 바람직하겠다.
3. div class명은 className으로!
HTML에서는 div class=클래스명 형식이었지만, 리액트 문서에서는 className인 점 헷갈리면 안 되겠다.
삼항연산자를 사용한 부분은 인라인 스타일에 의해 빨간색으로, 그 아래의 p태그는 변수로 선언한 스타일을 적용하여 파란색으로 잘 출력된다.
Props
컴포넌트 끼리의 정보교환 방식으로, 반드시 위(부모)에서 아래(자식) 방향으로만 흐르며, 반드시 읽기 전용으로 취급하며 변경하지 않는다는 특징이 있다.
< Daughter 컴포넌트에 Mom, Grannny 이름 정보 전달하기>
Granny 이름 "배여사"와 Mom 이름 "정여사"를 모두 Daughter 컴포넌트에 전달하기 위해서는 캡쳐와 같이 묶어서 작성하면 된다.
배여사의 손녀, 정여사의 딸 아주아주 맞습니다
- Prop Drilling
부모 -> 자식 컴포넌트 간 데이터를 전달할 때 가운데 컴포넌트들이 오로지 데이터 전달 역할만 하여 부모의 데이터가 아래로 여러 번 뚫고 내려가야 하는 경우를 말. 유지 보수 측면에서 어렵기 때문에 이것을 해결하기 위한 방법들이 있다.
- Props Children
자식 컴포넌트로 정보를 전달하는 또 다른 방법으로, header 영역을 만들 때 layout 컴포넌트에서 한 번만 작성하여 여러 페이지에서 모두 보여지도록 할 때 사용되는 경우가 많다.
import React from "react";
function User(props) {
return <div>{props.children}</div>; // props.children을 받아 렌더링
}
function App() {
return <User>안녕하세요</User>;
// 자식 컴포넌트의 이름으로 태그를 열고 닫아준 뒤
// 태그 안에 전달하고자 하는 내용을 넣는다.
}
export default App;-
Props 추출
어제 잠들기 전부터 '내일은 꼭 참치마요 해먹어야지'라고 생각했기 때문에 넣어본 예시ㅎ 여튼 새로 만든 Child.js에 내용을 제대로 전달하기 위해서는 App.js 상단에 import를 해줘야 한다. 그러고 나서 return문 안에 Child와 Children 컴포넌트로 보낼 정보를 입력한다.
브라우저 콘솔창에 제대로 3개의 정보가 나타나고 있다.
여튼 이런 식으로 받아온 props를 구조분해할당을 통해 추출해서 각각의 정보에 따로 접근할 수 있다. Child.js 에서 props로 입력해 두었던 매개변수 자리에 {lunchtime, menu, children} 이렇게 해주면, 각각의 요소를 추출할 수 있다. 뜯어진 요소들을 console.log로 출력해보자!
그럼 요렇게 기존에 object로서 묶여 한꺼번에 출력됐던 정보들이 하나씩 뜯어져서 출력되는 것이 보인다. 똑같은 내용이 2번 보이는 게 거슬리면 Strict mode를 해제하면 된다고 한다.
-
default props
부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기값. 위의 props 추출에서 작성한 코드의 경우, 만약 부모 컴포넌트에서 menu값을 전달하지 않았다면, Child.js에서 출력했을때 해당 부분은 '참치마요'가 아니라 'undefined'로 출력될 것이다.
이럴 때 Child.js에 디폴트값을 설정해 둔다면
참치마요는 더이상 뜨지 않지만 적어도 undefined가 아니라 디폴트값으로 설정해 둔 '기본 메뉴'가 출력된다. 그래도 난 오늘 참치마요를 해먹을 것이다
