지금 필요한 것만 빼고 다 삭제함

기초 이해

App.js

리액트는 단일 태그만 들어갈 수 있다.

<> 태그들을 하나로 묶어서 해결 가능.

react에서 <>태그를 무시하고 만듬.

App.css import

클래스 이름도 변수로 지정 가능.

App.js

import "./App.css";

function App() {
  const helloDiv = "hello-div";

  return (
    <>
      <div className={helloDiv}>안녕하세요.</div>
    </>
  );
}

export default App;

App.css

.hello-div{
    background-color: blue;
}

---

실습

Hello.js import

급발진이지만 이게 된다.

컴포넌트 배열

import "./App.css";
import Hello from './Hello' // js파일은 확장자 안 붙여도 됨.

function App() {
    // const arr = ['가', '나', '다', '라'];
    const arr = [<Hello />, <Hello />, <Hello />, <Hello />]; // 이게 된다고?

  return (
    <>
      {arr}
    </>
  );
}

export default App;

map을 이용한 반복과 컴포넌트에 데이터 전달

App.js

import "./App.css";
import Hello from './Hello' // js파일은 확장자 안 붙여도 됨.

function App() {
    const arr = ['가', '나', '다', '라'];
    // const arr = [<Hello />, <Hello />, <Hello />, <Hello />]; // 이게 된다고?

  return (
    <>
    {/* map은 배열 안의 요소의 타입을 바꿀 때 사용 */}
    {/* 이런식으로 데이터 전달 가능. */}
      {arr.map(el => <Hello data={el} asdf={"ㅎㅇ"}/>)}
    </>
  );
}

export default App;

Hello.js

function Hello(props){
    console.log(props)
    return <div>안녕하세요. {props.data}</div>;
}

export default Hello;

두 번씩 출력

index.js 코드에서

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

React.StrictMode가 쓰여있으면 두 번씩 읽히는 듯 하다.
삭제해주면 정상 출력된다.

오류

• 리스트 태그에는 항상 키 값을 넣어줘야 한다. 키가 없어서 오류가 뜬다.
• App.js의 내용을 바꿔준다.

{arr.map((el, index) => <Hello key={index} data={el} asdf={"ㅎㅇ"}/>)}

• map에서 넘어오는 매개변수 value, index, array 중 index를 key값으로 받았다.
  
• 오류가 뜨지 않는다.

레이아웃

기본적인 사용법

레이아웃js 작성하고 매개변수로 {children}(props.children와 같은 의미)이나 props를 받아 props.children을 작성해주면,
Layout.js

function Layout(props){
    return (
        <div>
            <div>레이아웃에서 작성한 영역</div>
            <div>{props.children}</div>
        </div>
    );
}

우리가 App1.js에서 Layout 컴포넌트를 사용하며 children을 넘겨주게 된다.

import Hello from "./Hello";
import Layout from "./Layout";

function App1() {
  const arr = ["가", "나", "다", "라"];

  return (
    <Layout>
      {/* 이곳에 태그를 집어넣으면 Layout에 children으로 넘어감. */}
      {arr.map((el, index) => (
        <Hello key={index} data={el} asdf={"ㅎㅇ"} />
      ))}
    </Layout>
    // <Layout children={<>App1에서 작성한 영역</>}>
    // </Layout>
  );
}

export default App1;

Layout 컴포넌트 안에 작성한 태그들이 props.children으로 넘어간다는 것이다.

여러가지 작성법

App1.js
주석 친 Layout과 주석 안쳐진 Layout은 기능이 같음.

import Layout from "./Layout";

function App1() {
  return (
    // <Layout>
    //     {/* 이곳에 태그를 집어넣으면 Layout에 children으로 넘어감. */}
    //     <>
    //         App1에서 작성한 영역
    //     </>
    // </Layout>
    <Layout children={<>App1에서 작성한 영역</>}>
    </Layout>
  );
}

export default App1;

Layout.js
아래 두 코드는 같다.

function Layout({children}){
    return (
        <div>
            <div>레이아웃에서 작성한 영역</div>
            <div>{children}</div>
        </div>
    );
}

export default Layout;

function Layout(props){
    return (
        <div>
            <div>레이아웃에서 작성한 영역</div>
            <div>{props.children}</div>
        </div>
    );
}

export default Layout;