[모각코+] 웹 리액트(React) 1월달과정 2일차

https://codemate.kr/@Qcell/2%EC%9D%BC%EC%B0%A8-%EC%B6%9C%EC%84%9D%EA%B3%BC%EC%A0%9C

2일차 출석과제 by Qcell | 코드메이트

2일차엔 드디어 리액트의 기초 구조 및 동작 과정에 대해 학습했습니다.

앞으로 이 컴포넌트를 활용할 생각을 하니까 기분이 좋네요 :D 코드량도 줄어들고 가독성도 훨씬 더 좋아질 것 같아요.

 

Header.js

function Header(){
    return (
    <h1>큐셀의 MBTI 검사</h1>
    );
}


export default Header;

Content.js

function Content(){
    return (
        <div>큐셀의 MBTI 검사 사이트입니다.<br>
        </br> 16가지 항목의 질문지가 있으며, 해당하는 항목에 체크해주시면 결과가 나타납니다.
        </div>
    );
}


export default Content;

App.js

import Header from './Header'
import Content from './Content';
function App() {
  return (
    <div>
      <Header></Header>
      <Content></Content>
    </div>
  );
}

export default App;

 

실행 화면