React 프론트 개발 언어 -Props

외부 파일 함수 가져와 사용하기.

Hello.js 파일

import React from 'react';

function Hello() {
  return <div>Hello</div>;
}

export default Hello;

App.js

import React from 'react';
import Hello from './Hello';

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

export default App;

Hello.js 파일에서 선언한 Hello 함수를 App.js에서 사용한다.

App.js 내부에서 style을 정의하고 변수로 받아 사용하는 형식

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  const style = {
    backgroundcolor: 'black',
    color: 'aqua',
    fontSize: '24px',
    padding: '1rem',
  };

  return <div style={style}>{name}</div>
}

export default App;

css를 가져올때는 외부에서 css 파일을 만들고 선언한 후 div className="gray-box"다음과 같이 className으로 가져올 수 있다.

props

Hello.js

import React from 'react';

function Hello(props) {
    return <div>Hello~ {props.name}</div>;
}

export default Hello;

위 코드에서 props를 따로 쓰지 않고 코드를 작성하고 싶을 때는 {}안에 변수를 넣어서 전달 받으면 된다.

function Hello({name}) {
    return <div>Hello~ {name}</div>;
}

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello name="React!!" />
    </div>
  );
}

export default App;

defaultProps 로 기본값 설정

Hello.js

import React from 'react';

function Hello({name, color}) {
    return <div style={{color}}>Hello~ {name}</div>;
}

Hello.defaultProps = {
    name: 'NoName',
};

export default Hello;

다음과 같이 defaultProps를 설정해서 아무값도 입력되지 않을때 출력되는 기본값을 저장해 놓을 수 있다.

props.children

: Wrapper 컴포넌트를 사용하여 테두리와 패딩이 적용된 컨테이너 안에 Hello 컴포넌트들을 렌더링

Wrapper.js

import React from 'react';

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return <div style={style}>{children}</div>;
}

export default Wrapper;

src/App.js

import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';

function App() {
  return (
    <Wrapper>
      <Hello name="React!!" color="red" />
      <Hello color="pink" />
    </Wrapper>
  );
}

다음 코드를 보면 wrapper.js 파일에서 만든 디자인안에 app.js에서 Hello를 넣어 최종적으로 출력하는 것이다. 이렇게 style을 상속받아 디자인 할 수도있다 !!