[코드잇] 리액트 웹 개발 시작하기(3)

1. 컴포넌트 

 

리액트 엘리먼트 

- JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 됨

import ReactDOM from 'react-dom';

const element = <h1>안녕 리액트!</h1>;
console.log(element);
ReactDOM.render(element, document.getElementById('root'));

- 이런 객체를 리액트 엘리먼트라 부름

- 리액트 엘리먼트를 ReactDOM.render 함수의 인수로 전달하게 되면, 리액트가 객체 형태의 값을 해석해서 HTML 형태로 브라우저에 띄어줌

 

리액트 컴포넌트 

- 리액트 엘리먼트를 조금 더 자유롭게 다루기 위한 하나의 문법

- 리액트 컴포넌트의 이름은 반드시 첫 글자를 대문자로 작성해야 함

mport ReactDOM from 'react-dom';

function Hello() {
  return <h1>안녕 리액트</h1>;
}

const element = (
  <>
    <Hello />
    <Hello />
    <Hello />
  </>
);

ReactDOM.render(element, document.getElementById('root'));

- 컴포넌트 함수 이름을 통해 하나의 태그처럼 활용할 수 있음

- 이러한 특성을 모듈 문법으로 활용하면 훨씬 더 독립적으로 컴포넌트 특성에 집중해서 코드 작성 가능

 

Dice.js

import diceBlue01 from './assets/dice-blue-1.svg';

function Dice() {
  return <img src={diceBlue01} alt="주사위" />;
}

export default Dice;

App.js

import Dice from './Dice';

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

export default App;

 

2. Props

 

Props

- JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에도 속성 지정 가능

- 리액트에서 이렇게 컴포넌트에 지정한 속성들을 Props라고 부름 

- 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달됨

 

App.js

import Dice from './Dice';

function App() {
  return (
    <div>
      <Dice color ="red" num = {2} />
    </div>
  );
}

export default App;

 

Dice.js

import diceBlue01 from './assets/dice-blue-1.svg';
import diceBlue02 from './assets/dice-blue-2.svg';
import diceBlue03 from './assets/dice-blue-3.svg';
import diceBlue04 from './assets/dice-blue-4.svg';
import diceBlue05 from './assets/dice-blue-5.svg';
import diceBlue06 from './assets/dice-blue-6.svg';
import diceRed01 from './assets/dice-red-1.svg';
import diceRed02 from './assets/dice-red-2.svg';
import diceRed03 from './assets/dice-red-3.svg';
import diceRed04 from './assets/dice-red-4.svg';
import diceRed05 from './assets/dice-red-5.svg';
import diceRed06 from './assets/dice-red-6.svg';

const DICE_IMAGES = {
  blue: [diceBlue01, diceBlue02, diceBlue03, diceBlue04, diceBlue05, diceBlue06],
  red: [diceRed01, diceRed02, diceRed03, diceRed04, diceRed05, diceRed06],
};

function Dice({ color = 'blue', num =1}) {
  const src = DICE_IMAGES[color][num-1];
  const alt = `${color} ${num}`;
  return <img src={src} alt = {alt} />;
}

export default Dice;

 

 

children prop

- props에는 children이라는 조금 특별한 프로퍼티(prop, 프롭)가 있음

- JSX문법으로 컴포넌트를 작성할 떄 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children값에 담기게 됨

- JSX 문법으로 컴포넌트를 작성할 때 어떤 정보를 전달 할때는 일반적인 props의 속성값을 주로 활용하고 

- 화면에 보여질 모습을 좀 더 직관적인 코드로 작성하고자 할 때 children 값을 활용할 수 있음

- children을 활용하면 단순히 텍스트만 작성하는 것을 넘어서 컴포넌트를 작성할수도 있고, 이 컴포넌트 안에 복잡한 태그들을 더 작성할 수 도 있음 

 

App.js

import Dice from './Dice';
import Button from './Button';

function App() {
  return (
    <div>
      <Button>던지기</Button>
      <Button>처음부터</Button>
      <Dice color ="red" num = {4} />
    </div>
  );
}

export default App;

Button.js

function Button({ children }) {
  return <button>{children}</button>;
}

export default Button;