[TIL] D+53 리액트 실습 이틀차... 금요일!!!!!

1️⃣ 리액트 입문 2주차

props가 너무 어려워요

 

📌 props

Properties의 줄임말.

props란 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터이다.

= 컴포넌트 간의 정보 교류 방법

 

props의 특징

1. props는 반드시 위에서 아래 방향, 단방향으로 흐른다.

2. props는 읽기 전용이기 때문에 부모가 준 데이터를 자식이 마음대로 바꿀 수 없다.

(부모 컴포넌트에서만 데이터를 정할 수 있다.)

 

// 부모 컴포넌트
function Parent() {
  return (
    <div>
      <Child name="준섭" />
      <Child name="태섭" />
    </div>
  );
}

// 자식 컴포넌트
function Child(props) {
  return <p>안녕, 나는 {props.name}이야!</p>;
}

 

위 코드는 부모가 자식에게 name 이라는 데이터를 보낸 것이다.

자식은 그 데이터를 받아서 화면에 보여주는데 결과는 아래와 같이 나온다.

안녕, 나는 준섭이야!
안녕, 나는 태섭이야!

---

📌 props로 값 전달하고 렌더링 하기

컴포넌트 간의 정보를 교류할 때 props를 사용한다.

Mother 컴포넌트가 가지고 있는 정보를 Child에게 주고싶을 때에는 아래 코드와 같이 작성한다.

// src/App.jsx

import React from "react";

function App() {
  return <GrandFather />;
}

function GrandFather() {
  return <Mother />;
}

function Mother() {
	const name = '홍부인';
  return <Child motherName={name} />; // 💡"props로 name을 전달했다."
}

function Child(props){
	console.log(props) // 이게 바로 props다.
	return <div>연결 성공</div>
}



export default App;

 

motherName이라는 이름으로 name 값을 Child 컴포넌트에 전달해준 것이다.

이러한 과정을 "props로 정보를 전달했다" 라고 표현한다.

 

 

Mother가 보내준 정보는 콘솔로 찍었을 때 객체 형태({key:"value"})로 보여야한다.

props란 결국 부모 컴포넌트가 자식에게 넘겨준 데이터들의 묶음이다.

 

 

// src/App.jsx

import React from "react";

function App() {
  return <GrandFather />;
}

function GrandFather() {
  return <Mother />;
}

function Mother() {
	const name = '홍부인';
  return <Child motherName={name} />; //
}

function Child(props){
	return <div>{props.motherName}</div>;
}



export default App;

 

Mother로부터 전달받은 motherName을 화면에 렌더링하기 위해서는 위와 같이

Child의 div안에 {props.motherName}을 넣어야한다.

 

props는 객체 리터럴 형태이기 때문에 {props.motherName} 로 꺼내서 사용할 수 있다.

객체 리터럴의 key값이 motherName인 이유는 Child로 값을 보내줄 때 motherName={name}으로 보내주었기 때문이다.

 

그러나 위와 같이 데이터를 받기 위해 여러 번 데이터를 내려줘야하는 패턴인 prop drilling은 피해야한다.

그래서 추후에 Redux라는 데이터 상태관리 툴을 사용한다고 한다.

---

📌 props.children

부모에서 자식 컴포넌트로 데이터를 전달하는 또 다른 방법

props.children은 자식 컴포넌트가 부모로부터 받은 '내용'이다.

import React from "react";

const App = () => {
  return <User abc="123">안녕하세요!!!</User>;
};

const User = (props) => {
  console.log("props =>", props);
  return <div>유저님 {props.children}</div>;
};

export default App;

 

여기서 App이 부모 컴포넌트고 User가 자식 컴포넌트다.

 

 

위 코드를 렌더링한 것

 

원래는 <User />와 같은 형태로 닫힌 코드 하나만 썼겠지만

<User></ User>로 열고 닫는 이유는,, 이런 형식으로 쓰면 User 태그 안에 내용을 넣을 수 있기 때문이다

 

props.children은 Layout 컴포넌트를 만들 때 주로 사용한다.

유연한 디자인이 가능하고 코드를 재사용할 수 있기 때문인 것 같다...

 

 

---

2️⃣ 디자인 집중반

UI 집중반...ㄴㅔ버엔딩 과제 ~

 

 

미뤘던 과제 하루만에 다 해버렸자나?

글래스 모피즘 디자인만 만들면 된다 야호 ~ ^_^

과제 하기 싫어서 관두고 싶은 순간이 정말 많았는데 ...

하니까 어찌 하긴 했네... 그만두지 않은 나 장하다 ㅠ.ㅠ