⚛️React : section04 - component

이번 수업에서는 리액트의 컴포넌트를 직접 생성하고 만들어본다. 여기서 주의해야 할 점은 내가 만든 컴포넌트를 카멜 표기법으로 작성하면 오류가 뜬다. 올바른 작성 법은 아래와 같다. (참고로 컴포넌트를 불러오는 변수명 또한 파일명과 동일하는게 하는 것이 좋다.)

class ClassStyle extends React.Component {

  // ...

}

이렇게 항상 컴포넌트 변수명의 앞글자는 대문자여야만 한다. 이것을 주의하면서 컴포넌트를 작성하고 불러오면 된다. 내가 작성한 코드는 아래와 같다. 

- myStyle.js

//내가 만든 컴포넌트

function Header() {

  return <header>

    <title>section04</title>

    <h1><a href="/">WEB</a></h1>

  </header>

}

 

function Article() {

  return <article>

    <h2>Welcome</h2>

    Hello, WEB

  </article>

}

 

function List() {

  return <nav>

    <ol>

      <li><a href="/read/1">html</a></li>

      <li><a href="/read/2">css</a></li>

      <li><a href="/read/3">js</a></li>

    </ol>

    <Article></Article>

  </nav>

}

function Intro() {

  return <h1><a href='#' onClick={() => { alert("test") }}>hello! section04</a></h1>

}

function App() {

  return (

    <div>

      <Header></Header>

      <Intro></Intro>

      <List></List>

    </div>

  );

}

export default App;  //contact App_4.js

이제 이 것을 App_4.js에 import할 것이다.

-  App_4.js

//component생성하기

//항상 부모 태그가 있어야 return할 수 있다.

//카멜표기법은 사용하면 안된다.

import '../../App.css';

import ClassStyle from './classStyle'

import MyStyle from './myStyle'

function App4() {

  return (

    // <ClassStyle></ClassStyle>

    <MyStyle></MyStyle>

  );

}

export default App4; //contact index.js

 

최종 랜더링은 App_4.js에서 이루어지는 것은 아니다. index.js에서 도달하고 ClassStyle은 수업에서 작성한 코드이며 따로 js를 분리한 이유는 내가 작성한 코드와 수업에서 작성한 코드를 비교 해보기 위해서이다. 내가 작성한 코드의 모습은 아래 그림을 참고하자

위와 같이 구성을하고 각 수업마다 section을 나누어서 import export하는 방식이다. 이렇게 관리를 해야 비교분석하기도 좋다.