Component

Component 문법

function App() {
    
  ...

  return (
    <div className="App">
      ...
      <Component />
    </div>
  );
}

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

Component의 특징

1. 컴포넌트 이름은 보통 영어 대문자로 시작한다.
2. return 내부는 태그 하나로 묶는다.
3. 컴포넌트 위치는 보통 function App(){}와 나란히 만들어준다.
4. 컴포넌트 안에 컴포넌트를 넣는 것도 가능하다.

Fragments

• 그룹화 축약

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

클릭하면 동작하는 UI 만들기

1. UI 상태정보를 state로 만든다.
2. state가 true일 때만 UI가 보이도록 삼항연산자
3. 요소 클릭 시 상태 변경

function App() {
  ...
  let [modal, setModal] = useState(false);

  return (
    <div className="App">
      ...
      <div className="list">
        <h3
          onClick={() => {
            setModal(!modal);
          }}
        >
          {title}
        </h3>
        <p className="list__date">2021.12.31</p>
      </div>

      {modal ? <Modal /> : null}
    </div>
  );
}