7월26일48일차 - 리액트 props 표현방식

리액트의 virtual DOM을 이용하여 웹페이지를 새로고침하지 않고 파일을 다 실행시킵니다.
리액트에서는 여러 페이지를 링크로 이동하는 것이 아닌 single page에서 모든 작업을 실행할 수 있습니다.
이를 CSR(client side rendering)이라 하여 이용자가 작업을 웹페이지의 새로고침 없이 연속적으로 실행할 수 있습니다. 

(반댓말 Server Side Rendering)



부모 태그는 하나만 존재해야 하는 규칙이 있기 때문에 <> </>로 싸줍니다.
함수표현식
function App() {
  return (
    <>
      <Header />
      <Main />
      <Footer />
    </>
  );
}
함수선언식
const App = () => {
  return (
    <>
      <Header />
      <Main />
      <Footer />
    </>
  );
};



return 안에서는 문자로만 인식됩니다. js를 실행시키려면 {} 중괄호로 감싸주면 됩니다.
props는 객체입니다.
const Main = (props) => {
  return (
    <main>
      main
      {console.log(props)}
      {console.log(props.lee) /* props의 lee 속성을 출력합니다. */} 
    </main>
  );
};
객체를 선언하여 props를 주는 방식입니다. lee라는 속성의 값을 출력합니다.
const Main = (props) => {
  const { lee } = props;
  return (
    <main>
      {lee}
    </main>
  );
};
props를 대신하여 객체의 lee속성 자체를 객체로 선언합니다.
const Main = ({ lee }) => {
  return <main>{lee}</main>;
};

lee와 word라는 속성을 객체로 선언합니다.
const Main = ({ lee, word }) => {
  return (
    <main>
      {lee}는 {word}
    </main>
  );
};

// 전달받은 값이 없을 때 대신하여 전해줄 값을 지정할 수 있습니다.
Main.defaultProps = {
  word: "사과",
};


Wrapper로 감싸줄 때는 감싸진 객체들이 나타나지 않기 때문에 props.children 함수를 이용합니다.