JSX, Props

📌 JSX

Javascript + XML

 

JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그림

 

객체를 변수로 빼 재사용성 가능

import React from 'react'

export default function App() {
  const number = 1;
  
  const pTagStyle = {
    color: "red",
  }

  return(
    <div className="test-class">
      <p style={pTagStyle}>안녕하세요 리액트입니다.</p>
      {/* 주석을 사용하는 방법입니다. */}
      {/* 삼항 연산자를 사용해볼게요! */}
      <p style={pTagStyle}>
        {
          number >  10 
          ? number + '은 10보다 크다'
          : number + '은 10보다 작다.'
        }
      </p>
    </div>
  )
}

---

📌 Props

부모에서 자식으로 값을 내려줌(rendering) , 단방향

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

 

📄 Props 실습

import React from 'react'

// props를 통해 부모 → 자식 데이터가 전달됐다.
function Son(props) {
  console.log('props', props.motherName);
  return <div>나는 {props.grandName}의 딸 {props.motherName}의 아들이예요!</div>
}

// 부모 → 자식 정보를 전달했다!
function Mother(props) {
  const name = '홍부인';
  return <Son motherName={name} and grandName={props.grandName}/>
}

function GrandFather() {
  const name = '박덕수'
  return <Mother grandName={name}/>
}

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

export default App;

props 실습

 

 

 

📌 prop drilling 현상 발생

[부모] → [자식] → [그 자식] → [그 자식의 자식] 이 데이터를 받기 위해선 무려 3번이나 데이터를 내려줘야 해요. 이걸 바로 prop drilling, props가 아래로 뚫고 내려간다.

어디서 문제가 발생했는지 추적하기 힘들기 때문에, 이와 같은 패턴을 피해야 한다.

이를 피하기 위해 ‘Redux’ 데이터 상태 관리 툴 배울 예정!

 

📌 props Children

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

Layout 컴포넌트를 만들 때 자주 사용

 

📄 예시

import React from 'react'

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

function App() {
  return <User>안녕하세요!</User>
}

export default App;

 

children

---

📄 Layout.jsx

import React from 'react'

function Layout(pros) {
  return (
    <>    
    <header 
      style={{
        margin : '10px',
        border : '1px solid red'
      }}
    > {pros.children}
    </header>
    </>
  )
}

export default Layout;

 

📄 App.jsx

import React from 'react'
import Layout from 'Layout'

function App(props) {
  return <Layout>
    <div>App 컴포넌트에서 보낸 값입니다!</div>
  </Layout>
}

export default App

 

머릿글

---

📌 Props 추출

구조 분해 할당으로 pros 추출

 

📄Child.jsx

import React, { Children } from 'react'

function Child({age, name, children}) {
    console.log(age);
    console.log(name);
    console.log(children);
    return <div>Child</div>;
}

export default Child

 

📄 App.jsx

import React from 'react'
import Child from 'Child';

function App() {
  const name = 'test';
  return (
    <Child age={21} name = {name}>
      이름
    </Child>
  );
}

export default App

 

props 추출

 

---

📌 defaultProps

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

 

📄 Child.jsx

import React, { Children } from 'react'

function Child({age, name, children}) {
    console.log(age);
    console.log(name);
    console.log(children);
    return <div>Child</div>;
}

Child.defaultProps = {
    age: '기본나이'
}

export default Child

 

📄 App.jsx

import React from 'react'
import Child from 'Child';

function App() {
  const name = 'test';
  return (
    <Child name = {name}>
      이름
    </Child>
  );
}

export default App

 

default

---

📌 Tip

프로젝트할 때, 컴포넌트 관련 파일은 .jsx로 명시적으로 표시하는게 좋을 수 있음!