Modern React 1

props 를 통해 컴포넌트에게 값 전달하기

:: props 는 properties 의 줄임말

• 가령, App.js에서 Hello컴포넌트의 name에 접근하려면,,?

<App.js>
import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

<Hello.js>
import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}
//컴포넌트에게 전달되는 props 는 파라미터를 통해 조회가능. props 는 객체 형태로 전달, 만약 name 값을 조회하고 싶다면 props.name 을 조회

export default Hello;

• props이용해서 색상바꿔주려면..?

<App.js>
import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" color="red"/> //색상추가쓰
  );
}

export default App;

<Hello.js>
import React from 'react';

function Hello(props) {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}

// props를 계속 입력해줘야하니까 비구조화할당 이용해서 줄여봅시다!
===>
function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;

• 컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정

<Hello.js>
import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

Hello.defaultProps = {
  name: '이름없음 앞에서 name속성지움쓰'
}

export default Hello;

<App.js>
import React from 'react';
import Hello from './Hello';

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

export default App;

• 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 조회

//1. 우선 감쌀 wrapper컴포넌트를 만든다

<Wrapper.js>
import React from 'react';

function Wrapper() {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  
  //2. 이건 여담인데, JSX 에서 태그에 style 과 CSS class 를 설정하는 방법은 HTML 에서 설정하는 방법과 다름 : 인라인 스타일은 객체 형태로 작성.
 //그리고 JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {} 으로 감싸서해야함.
 
  return (
    <div style={style}>

    </div>
  )
}

export default Wrapper;

<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>
    //3. Wrapper 태그 내부에 Hello 컴포넌트 두개를 넣었는데요, 브라우저를 확인하면 Hello 컴포넌트들은 보이지 x.
    //4. 보이게 하려면 wrapper에서 props.children으로 가져와야함.
  );
}

export default App;

<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;

---

---

modern react 191229
전달받은 교재(?)는 알고보니 내용이 생각보다 알차게 구성되어있다.
왜 "모던리액트"를 표방하는지 몰랐는 데 전체 내용이 오로지 hooks로만 이루어져있다.
마치 class는 없던 것처럼...( ・◇・)
anyhow, 기초부터 다시 보기에 매우 좋은 것 같아 계속 12/26일부터 따라치고 있는 데 생각보다 내 기초는 꽤나 없고... (모르는거 왜많은데)