React_Component

React는 사용자 정의 태그를 만드는 기술이다.

 

시작하기에 앞서, javascript환경에서 html 태그 자동완성을 하고 싶다면, settings.json에서 아래의 코드를 추가하자.

"emmet.includeLanguages": { "javascript": "javascriptreact" }

---

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

function App() {
  return (
    <div className="App">
      <header>
        <h1>
          <a href="/">WEB</a>
        </h1>
      </header>
      <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>
      </nav>
      <article>
        <h2>Welcome</h2>
        Hello, WEB
      </article>
    </div>
  );
}

export default App;

위와 같은 코드가 있다. App함수에 html 태그가 크게 3가지로 나뉘어서 작성되어있다.

기본적인 틀을 보면 함수 return에 html요소가 들어가는것으로 보아하니, 다음과 같이 작성해도 같은 결과물이 나온다.

// import logo from './logo.svg';
import './App.css';

function Header() {
  return <header>
    <h1><a href="/">WEB</a></h1>
  </header>
}

function App() {
  return (
    <div className="App">
      <Header></Header>
      <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>
      </nav>
      <article>
        <h2>Welcome</h2>
        Hello, WEB
      </article>
    </div>
  );
}

export default App;

우리는 이때 만든 사용자 정의 태그를 컴포넌트(Component) 라고 한다.

다른 태그들도 함수로 만들어주면,

// import logo from './logo.svg';
import './App.css';

function Header() {
  return <header>
    <h1><a href="/">WEB</a></h1>
  </header>
}

function Nav() {
    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>
    </nav>
}

function Article() {
  return <article>
    <h2>Welcome</h2>
    Hello, WEB
  </article>
}
function App() {
  return (
    <div className="App">
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

export default App;

재사용하기 좋게 만들어 줄 수 있다.

 

---

리액트의 본질? Component

 

- 후기

오랜만에 후기를 적는다. 방학에 띵가띵가 놀고 Java 끝내지도 못하고, 2학기가 시작되었다. 운동하는 습관을 제외하고 한 게 없다. 그래도 팀원들을 잘만난거 같아서 다행이다. 최대한 도움이 되도록 노력해보자.

 

내일은 월요일?

내일은 체스트!