🌷 리액트 [ 컴포넌트, JSX, Prop ]

개발자 공부/🌷 리액트 공부

🌷 리액트 [ 컴포넌트, JSX, Prop ]

유정♡ 2024. 6. 13. 14:36

1) npm install

2) npm run dev

3) Control + C = 서버 중단

4) npm run dev = 서버 다시 시작

첫 문자 대문자

리액트는 모든 컴포넌트에서 나온 모든 JSX코드를 결합하여 전체적인 DOM을 형성 -> 화면에 보이는 요소

[ 동적 출력 ]

페이지를 새로 고침할 때 마다 const reactDescriptions = ['Fundamental', 'Crucial', 'Core']; 값이 랜덤으로 출력 됨

상수에 저장해서 상수값을 중괄호에 넣어도 됨

[ 이미지 파일 로딩 ]

import후 중괄호{}로 사용 가능

import reactImg from './assets/react-core-concepts.png';

[ Prop ]

Prop : 재사용이 가능하다 , 데이터를 컴포넌트로 전달하고 그 데이터를 그곳에서 사용 가능하다.

여러번 재사용하지만 사용할 때 마다 다른 데이터를 전달하고자 한다.

커스텀 컴포넌트에 커스텀 속성 추가 가능 , 컴포넌트 설정하는 개념

import reactImg from './assets/react-core-concepts.png';
import componentsImg from './assets/components.png';

const reactDescriptions = ['Fundamental', 'Crucial', 'Core'];

function genRandomInt(max) {
  return Math.floor(Math.random() * (max + 1));
}

function Header() {
  const description = reactDescriptions[genRandomInt(2)];
  return (
    <header>
      <img src={reactImg} alt="Stylized atom" />
      <h1>React Essentials</h1>
      <p>
        {description} React concepts you will need for almost any app you are going to build!
      </p>
    </header>
  );
}

function CoreConcept(props) {
  return (
    <li>
      <img src={props.image} alt={props.title} />
      <h3>{props.title}</h3>
      <p>{props.description}</p>
    </li>
  );
}

function App() {
  return (
    <div>
      <Header />
      <main>
        <section id='core-concepts'>
          <h2>Core Conception</h2>
          <ul>
            <CoreConcept 
                title="Components" 
                description="The core UI building block." 
                image={componentsImg} />
            <CoreConcept/>
            <CoreConcept/>
          </ul>
        </section>
        <h2>Time to get started!</h2>
      </main>
    </div>
  );
}

export default App;

[ data.js ]
import componentsImg from './assets/components.png';
import propsImg from './assets/config.png';
import jsxImg from './assets/jsx-ui.png';
import stateImg from './assets/state-mgmt.png';

export const CORE_CONCEPTS = [
  {
    image: componentsImg,
    title: 'Components',
    description:
      'The core UI building block - compose the user interface by combining multiple components.',
  },
  {
    image: jsxImg,
    title: 'JSX',
    description:
      'Return (potentially dynamic) HTML(ish) code to define the actual markup that will be rendered.',
  },
  {
    image: propsImg,
    title: 'Props',
    description:
      'Make components configurable (and therefore reusable) by passing input data to them.',
  },
  {
    image: stateImg,
    title: 'State',
    description:
      'React-managed data which, when changed, causes the component to re-render & the UI to update.',
  },
];


[ App.jsx ]
import reactImg from './assets/react-core-concepts.png';
import { CORE_CONCEPTS } from './data.js';

const reactDescriptions = ['Fundamental', 'Crucial', 'Core'];

function genRandomInt(max) {
  return Math.floor(Math.random() * (max + 1));
}

function Header() {
  const description = reactDescriptions[genRandomInt(2)];
  return (
    <header>
      <img src={reactImg} alt="Stylized atom" />
      <h1>React Essentials</h1>
      <p>
        {description} React concepts you will need for almost any app you are going to build!
      </p>
    </header>
  );
}

function CoreConcept({image, title, description}) {
  return (
    <li>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </li>
  );
}

function App() {
  return (
    <div>
      <Header />
      <main>
        <section id='core-concepts'>
          <h2>Core Conception</h2>
          <ul>
            <CoreConcept 
                title={CORE_CONCEPTS[0].title }
                description={CORE_CONCEPTS[0].description}
                image={CORE_CONCEPTS[0].image} />

            <CoreConcept {...CORE_CONCEPTS[1]}/> 
            <CoreConcept {...CORE_CONCEPTS[2]}/>
            <CoreConcept {...CORE_CONCEPTS[3]}/>                               
          </ul>
        </section>
        <h2>Time to get started!</h2>
      </main>
    </div>
  );
}

export default App;

[ Component 파일 나눠주기 ]

한 파일에 모두 저장하는 것은 비추 !! 파일마다 나눠주기 !

파일명과 컴포넌트 이름 동일하게 !!

[ 컴포넌트 옆에 컴포넌트 스타일 파일 저장하기 ]

import './Header.css';

만약 CSS 하나에 다 적용헤버리면 자동적으로 한정적으로 제한되지 않는다 모든 파일에 적용된다

[ children props ]

컴포넌트 열림과 닫힘 사이에 내용이 들어가면 리액트가 어느 위치에 출력해야할지 몰라서 자동으로 생략 됨

결국 컴포넌트에서 출력하라고 명령해야됨 -> props -> children

컴포넌트 사이에 들어간 내용 = children