나를 위한 개발일지

Props

: 부모에서 자식으로 값을 내려준다. 컴포넌트 간의 정보 교류 방법

⭐props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향).

⭐props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다

props로 값 전달하기

전달하기 - [주체 : 부모]

우리는 컴포넌트 간의 정보를 교류할 때 Props를 사용

이 과정을 “Props 로 정보를 전달했다” 라고 표현

// src/App.js

import React from "react";

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

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

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

function Child() {
  return <div>연결 성공</div>;
}



export default App;

받기 - [주체 : 자식]

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

Mother가 보내준 정보가 객체 형태로

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

리액트에서는 Props를 통해 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 넘겨줄 수 있다.

props로 받은 값을 화면에 렌더링 하기

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

props는 object literal 형태이기 때문에 {props.motherName} 로 꺼내서 사용할 수 있습니다. object literal의 key가 motherName 인 이유는 우리가 Child로 보내줄 때 motherName={name}

🤔object literal 란 {key: “value”} 데이터 형태를 의미

prop drilling

[부모] → [자식] → [그 자식] → [그 자식의 자식] 이 데이터를 받기 위해선 무려 3번이나 데이터를 내려줘야 한다.

이걸 바로 prop drilling, props가 아래로 뚫고 내려간다. 라고 한다.

Props Children

컴포넌트에서 말하는 children

: 자식 컴포넌트로 정보를 전달하는 또 다른 방법!

우리는 이미 그 방법을 ‘props’라고 배웠다. 얘도 props!

props를 보내는 방식

<User>리액트 어려워</User> 이렇게 정보를 보내고 있다.

<User hello='리액트 어려워'> 이렇게 props를 보내던 방식과는 조금 다르다. 이것이 children props를 보내는 방식이다.

정보를 받는 방식은 기존과 동일합니다. 대신 그 이름이 children 으로 정해져 있습니다.

import React from "react";


function User(props) {
	console.log(props.children)
  return <div></div>;
}

function App() {
  return <User>리액트 어려워</User>;
}

export default App;

children 값 받아서 렌더링하기

User 컴포넌트에서 props.children을 받아 그대로 렌더링 해준 모습

import React from "react";

function User(props) {
  return <div>{props.children}</div>;
}

function App() {
  return <User>리액트 어려워</User>;
}
export default App;

Props 추출

구조분해 할당과 Props

지금까지 props를 사용하는 모든 곳에서 props. 를 붙여줬다.

자바스크립트의 구조 분해 할당을 이용하여 조금 더 짧게 쓰는 방법이 있다. 앞서 설명했듯이 props는 object literal 형태의 데이터이다. 그래서 구조 분해 할당을 이용할 수 있다. 

만약 여러개의 props를 받는다면, { } 안에 여러개의 props를 그대로 써주면 된다.

function Todo({ title, body, isDone, id }){
	return <div>{title}</div>
}

defaultProps

: 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기 값!

Child 컴포넌트 입장에서는 부모 컴포넌트에서 name을 props 정보를 받기 전까지는 name 이 없는 상태.

그래서 부모 컴포넌트에서 props를 받기전까지 임시로 사용 할 수 있는 props를 설정 할 수 있습니다. Child 컴포넌트에서 직접 가능하다!

이후에 부모 컴포넌트에서 name props가 오게되면 설정된 defaultProps는 사라지고 내려 받은 props로 값이 바뀌게 된다.

// components/Child.js

import React from 'react';

function Child({ name }){
	return <div>내 이름은 {name} 입니다. </div>
}

// 이렇게 설정합니다.
Child.defaultProps={
	name: '기본 이름'
}

export default Child

default props 지정하기

defaultProps를 설정하면, 부모 컴포넌트로부터 아직 props 값을 받지 못했더라고 임시로 props의 값을 채울 수 있다.

그리고 부모 컴포넌트로부터 props가 오게되면 defaultProps 값은 진짜 props 값으로 변경된다.

// components/Child.js

import React from 'react';

function Child({ name }){
	return <div>내 이름은 {name} 입니다. </div>
}

// 이렇게 설정합니다.
Child.defaultProps={
	name: '기본 이름'
}

export default Child

<div ~~~~> 태그 옆에다가 주는 방법

태그 중간에 주는 방법{props.children}

나중에 정리하기..

HTML을 품은 JS ⇒ JSX!

JavaScript를 확장한 문법

JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법

// import [패키지명] from [경로] 이 형식으로 불러와요.
import React from 'react'; 
// js 파일 뿐 아니라 이미지도 가능가능!
import logo from './logo.svg';
// css? 가능!
import './App.css';

function App() {
  return (
    <div>
      리액트에서는 딱 하나의 html 파일만 존재한다.
      (public 폴더 아래에 있는 index.html)
    </div>
  );
}

export default App;

지켜야할 것!

- 태그는 꼭 닫아주기 <input />

- 무조건 1개의 엘리먼트를 반환하기

return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type='text'/>
    </div>
  );

- JSX에서 javascript 값을 가져오려면? 중괄호!!!

(값을 가져올 때 뿐만 아니라, map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용)

function App() {
	const cat_name = 'perl';
    const number = 1;
  return (
    <>
    <div>hello {cat_name}!</div>
    <p>안녕하세요! 리액트 반입니다 :)</p>
     {/* JSX 내에서 코드 주석은 이렇게 씁니다 :) */}
     {/* 삼항 연산자를 사용했어요 */}
     <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
     < />
  );
}

- class 대신 className!

- 인라인으로 style 주기

// 중괄호를 두 번 쓰는 이유? 객체도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 객체를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

// 위와 같은내용

JSX식에는 부모 요소가 하나 있어야 됨 =>

import React from 'react';

// 자식 컴포넌트
function Child() {
  return <div>나는 딸입니다.</div>
}

// 부모 컴포넌트
function App() {
  return (
    <>
    <Child/>
    <Child/>
    <Child/>
    </>
  )
}
export default App;

👻컴포넌트 이름은 대문자로 시작

import React from 'react';

function Child() {
  return <div>자식</div>
}

function Mother() {
  return <Child/>
}

function Grandfather() {
  return <Mother/>
}

function App() {
  return <Grandfather/>
}
export default App;

App.js에서

rfc : export default 같이 들어감

import React from 'react'

export default function App() {
  return (
    <div>App</div>
  )
}

rfce : function키워드 들어감

import React from 'react'

function App() {
  return (
    <div>App</div>
  )
}

export default App

태그 닫아주기 <~~~~~~~/>

최상위 태그는 하나만! 태그를 하나 더 만들거면 전체를 감싸는 최상위 태그를 만들 것

import React from 'react'

function App() {

  let a = 1;
  let b = 2;

  let style1 = {
    color: 'green'
  }

  return (
    <div>
      <p style={style1}>안녕하세요</p>
      <p>{a + b < 10 ? 'true' : 'false'}</p>
    </div>
  )
}

export default App

class 대신 className!

중괄호를 두 번 쓰는 이유 : 객체도 JS

스타일 객체를 변수로 만들고 쓸 수 있음