캠프 Ch5. TIL | 1월 6일

✅오늘 한 것
- REACT 입문 강의 2-6~2-9 수강

- UI 집중반 4회차 피드백

---

TIL 오랜만에 작성.

디자인 집중반 디자인 과제한다고 코딩 수업이 눈에 안들어왔다. (그것 때문인지 코딩 강의가 듣기 어려워서인지...)

REACT 입문 강의 2-6~2-9  정리

function App() {
  return (
    <Layout>
      <div>여긴 App의 컨텐츠가 들어갑니다.</div>
    </Layout>
  );
}
export default App;

function Layout(props) {
  const children = props.children;

  return (
    <main>
      <header>헤더입니다.</header>
      {children}
      <footer>푸터입니다.</footer>
    </main>
  );
}

 

"children은 어디서 튀어나온거지?"

children 은 React에서 컴포넌트를 설계할 때 기본적으로 제공되는 props 중 하나.

컴포넌트의 자식 요소를 의미한다.

 

1. App 컴포넌트에서

<Layout>
   <div>여긴 App의 컨텐츠가 들어갑니다.</div>
</Layout>

- Layout 컴포넌트를 호출하면서, 그 안에 <div>여긴 App의 컨텐츠가 들어갑니다.</div>라는 요소를 자식으로 전달.

- 이 <div>는 Layout 컴포넌트의 children으로 자동 전달 됨!

 

2. Layout 컴포넌트에서

const children = props.children;

- props는 Layout 컴포넌트로 전달된 모든 속성과 데이터를 담는 객체

- props.children은 <Layout> 태그 안에 포함된 자식 요소들( <div>여긴 App의 컨텐츠가 들어갑니다.</div>)을 가져옴!

 

3. Layout의 return에서 

{children}

- children을 {} 을 이용해 JSX에 삽입하면, 해당 위치에 자식 요소 (<div>여긴 App의 컨텐츠가 들어갑니다.</div>)가 렌더링 됨!

 

즉, children은 Layout이라는 컴포넌트 안에 들어 있는 내용물이고, 전달된 자식 요소들을 자동으로 포함하는 특별한 props이다.

<Layout> 안에 내용은 모두 props.children으로 전달된다. 

---

const App = () => {
  const title = "제목입니다.";

  return (
  <div>
    <h1>추출 테스트</h1>
    <Todo title={title} />
  </div>
  );
};

export default App;

const Todo = (props) => {
  console.log("props => ", props);
  return <div>투두입니다.</div>;
};

 

"여기서는 왜 props가 title:"제목입니다"야? "

props가 {title: "제목입니다."} 인 이유는, App 컴포넌트에서 <Todo title={title}/>를 호출하면서 title 속성에 "제목입니다."라는 값을 전달했기 때문!!

 

Todo= (props) => 설명

 

1. 함수형 컴포넌트 정의

const Todo = (props) => {
  // 컴포넌트 내용
  return <div>투두입니다.</div>;
};

- Todo는 함수형 컴포넌트

- React 에서는 컴포넌트를 함수로 선언할 수 있으며, 함수형 컴포넌트는 props를 매개변수로 받아 UI를 반환한다.

- 이 방식은 간결하고 가독성이 좋아, React에서 자주 사용하는 컴포넌트 정의 방식이다.

 

2. props의 역할

props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터를 담은 객체이다!

const Todo = (props) => {
  console.log("props =>", props); // 부모로부터 전달받은 데이터 확인
  return <div>투두입니다.</div>;
};

- props는 부모 컴포넌트에서 전달된 데이터를 포함한다.

- 부모 컴포넌트에서 다음과 같이 데이터를 전달했다면

<Todo title="오늘 할 일" />

- 자식 컴포넌트 Todo는 props 객체를 통해 { title: "오늘 할 일"}를 받게 된다.

- 즉, props.title로 "오늘 할 일" 값을 참조할 수 있다.

 

3. 화상표 함수의 특징

[기존 함수 선언 방식]

function Todo(props) {
  return <div>투두입니다.</div>;
}

 

- 위 방식과 동일하지만, 화살표 함수는 더 짧고 간결하게 작성할 수 있다.

 

[화살표 함수 버전]

const Todo = (props) => <div>투두입니다.</div>;

 

 

부모-자식 관계

const App = () => {
  const title = "제목입니다.";

  return (
    <div>
      <h1>추출 테스트</h1>
      <Todo title={title} />
    </div>
  );
};

- App은 Todo를 호출해, <Todo title={title} /> 를 렌더링한다.

- 여기서 App은 Todo를 포함하고 있기 때문에, React에서는 App이 부모 컴포넌트, Todo가 자식 컴포넌트.

 

부모- 자식 관계 설명

- 부모 컴포넌트는 다른 컴포넌트를 호출하고 포함하는 역할을 한다.

- 자식 컴포넌트는 부모 컴포넌트로부터 전달받은 데이터를 기반으로 자신의 UI를 정의하고 렌더링한다.

 

실행 흐름

1. App 컴포넌트가 실행되면서:

- const tilte = "제목입니다."로 데이터를 정의.

-<Todo title={title}/> 를 호출하녀 Todo에 데이터를 전달.

 

2. Todo 컴포넌트는 props를 총해 {title: "제목입니다."}를 전달 받고:

- props.title로 "제목입니다."를 렌더링.

 

3. 결과적으로, 브라우저에는 다음과 같은 UI가 렌더링

추출 테스트
제목입니다.
투두입니다.

 

그러면 코드를 작성할 때 

부모 컴포넌트에서 자식 컴포넌트를 호출하고 그 뒤에 자식 컴포넌트를 선언하는거네?

 

✖️

React에서 부모 컴포넌트와 자식 컴포넌트의 선언 순서를 작성 순서와 호출 순서가 독립적!!!!

 

1. 부모-자식 관계는 선언 순서가 아닌 호출 구조에 의해 결정된다.

 - 부모 컴포넌트레서 자식 컴포넌트를 호출하면, 그 순간 부모-자식 관계가 성립.

 - 자식 컴포넌트를 나중에 선언하더라도, React는 실행 시점에 이를 참조.

 

2. React는 컴포넌트를 참조할 수 있는 범위 내에서 호출만 가능하면 문제 없음.

 - 선언 순서와 호출 순서는 독립적이지먄, 선언된 컴포넌트를 호출하려면 호출 시점에서 해당 컴포넌트가 메모리에 있어야한다.

 - 따라서 호출하려는 자식 컴포넌트를 선언 전에는 사용할 수 없다. 

 

props 처리 방식에서의 차이

- props 객체로 받기

const Todo = (props) => {
  console.log("props => ", props);
  return (
  <div>
    <h3>{props.title}</h3>
    투두입니다.
    </div>
  );
};

1. props를 전체 객체로 받음

  - Todo 컴포넌트의 매개변수로 props를 받아 사용.

  - props는 { title: "제목입니다." } 와 같은 객체.

  - 속성 값을 사용할 때는 객체 접근 방식(props.title)을 사용해야 함.

2. 사용 시점에서 구조

  - props는 전체를 받아 접근하므로, 사용하기 전에 항상 props.를 붙여야 함.

3. 콘솔 출력 결과

  - console.log("props =>", props); 에서 props 전체 객체가 출력됨.

props => { title: "제목입니다." }

 

-구조 분해 할당 (Destructuring)

const Todo = ({title}) => {
  console.log("props => ", props);
  return (
  <div>
    <h3>{title}</h3>
    투두입니다.
    </div>
  );
};

1. 구조 분해 할당으로 특정 속성만 추출

  - props를 전체 객체로 받지 않고, 필요한 속성(title)만 분해해서 받음.

  - 매개변수 선언 부분에서 {title}로 props.title을 바로 추출.

2. 사용 시점에서 구조

  - title을 바로 변수처럼 사용할 수 있으므로 코드가 더 간결.

  - props.title 대신 title만 사용.

 

언제 어떤 방식을 사용하지?

1. 첫 번째 방식 

  - 여러 속성을 사용해야 할 때 유용.

  - props 객체 전체를 처리하거나, 여러 속성 값에 동적으로 접근할 필요가 있는 경우.

2. 두 번째 방식

  - 필요한 속성이 적을 때 간결하게 사용 가능.

  - 코드 가독성을 높이고 불필요한 props. 접두어를 제거.

 

왜 props는 항상 객체일까?

React는 데이터를 속성(key-value)의 형태로 전달하며, 이를 객체로 묶어 props로 제공한다.