ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [React] 리액트 소개, 컴포넌트, JSX
      카테고리 없음 2020. 3. 2. 17:53

      *리액트(React)

      웹사이트에 넣을 수 있는 정보량이 많아지면 웹사이트는 빠른 속도로 복잡해진다. 이것은 무엇을 의미할까. 사이트 내 HTML 태그가 정보량과 함께 기하급수적으로 늘어난다는 것을 의미한다. 당장 페이스북에 들어가서 개발자도구를 켜보면 엄청난 양의 HTML태그가 있는 것을 확인할 수 있다. 말하자면 HTML태그를 효율적으로 관리할 수 있는 방법이 필요해지는 것이다.

       

      만약 내가 반복해서 사용하는 HTML 태그를 한 덩어리에 담아 사용할 수 있다면 어떻게 될까. 말하자면 '사용자 정의 태그'를 만들어주는 것이다. 이 사용자 정의 태그를 사용하면 동일한 작업을 반복하지 않아도 될 뿐만 아니라(재사용성), 가독성이 좋아진다. 뿐만 아니라, 유지보수 또한 엄청나게 편해질 것이다. 

       

       

       

      리액트(React) 는 사용자 정의 태그를 만들어주는 여러가지 기술 중 하나로, 페이스북 UI를 잘 만들기 위해 페이스북에서 만든 UI 라이브러리다. 페이스북 뿐만 아니라 드롭박스, 마이크로소프트, 에어비앤비, 우버 등 여러 기업에서 리액트를 사용하고 있다. 

       

       

      * 리액트가 없다면

      웹 페이지를 만들기 위해 아래와 같이 코드를 작성했다.

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1> WEB </h1>
        world wide web!
    </header>

    <nav>
        <ul>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">JAVASCRIPT</a></li>
        </ul>
    </nav>
    <article>
        <h2>HTML</h2>
        HTML is HyperTExt Markup Language 
    </article>
    
</body>
</html>

       

      저 정도는 할만할 수 있다. 하지만 같은 내용이 천만 번 나와야 한다면 어떻게 할까. 복사를 천만번 하면 될까. 코드를 수정할 때도 천만번 수정해야 할까?

       

       

      * 컴포넌트 (Component)

      컴포넌트란 '사용자 정의 태그' 를 의미한다. 내가 담고 싶은 태그 내용을 한 덩어리로 담아서 이를 정의한 후 활용하는 것이다. 컴포넌트 사용을 통해 가독성, 재사용성, 그리고 유지보수의 용이성이라는 이점을 취할 수 있다.

       

      리액트의 컴포넌트를 사용해서 위 코드를 수정해보면 아래와 같다. 컴포넌트는 항상 대문자로 표기해야 한다. 소문자로 표기된 경우, 리액트는 이를 DOM 태그로 처리한다. 

       

       // 컴포넌트 정의. Compenent 라는 클래스를 상속받은 새로운 클래스 Subject를 만드는 것
class Subject extends Component {
  render(){
    return ( // 컴포넌트를 만들때는 반드시 '하나의' 최상위 엘리먼트가 있어야 한다
      <header> 
        <h1> WEB </h1>
        world wide web!
      </header>
    );
  }
}

class Nav extends Component { 
  render(){
    return(
      <nav>
      <ul>
          <li><a href="1.html">HTML</a></li>
          <li><a href="2.html">CSS</a></li>
          <li><a href="3.html">JAVASCRIPT</a></li>
      </ul>
  </nav>
    );
  }
}

class Article extends Component {
  render(){
    return(
      <article>
        <h2>HTML</h2>
          HTML is HyperTExt Markup Language 
      </article>
    );
  }
}

class App extends Component {
  render(){
    return ( // 위에서 컴포넌트들을 정의했으므로 하나하나 쓰지 않고 컴포넌트들를 가져다 사용.
      <div>  
        <Subject></Subject>
        <Nav></Nav>
        <Article></Article>
      </div>
    )
  }
}

       

      정의된 컴포넌트들은 내용을 하나하나 쓸 필요 없이 컴포넌트들을 그대로 가져가서 쓸 수 있다. 프로젝트의 크기가 커질수록 컴포넌트의 사용이 빛을 발하는 것이다.

       

       

      *JSX

      그런데, 위의 코드를 크롬 콘솔에 찍어보면 실행이 되지 않는다. 잘 보면 태그를 표현한 부분에 자바스크립트처럼 따옴표, 역슬래시 등을 사용해 처리해주지 않고 그냥 쓴 것을 알 수 있다. 즉, 위 코드는 자바스크립트 코드가 아니다. 페이스북에서 만든 자바스크립트 확장 언어인 JSX이다. 

      리액트는 별도의 파일에 마크업과 로직을 분리해 넣는 대신, 이 둘을 포함하는 '컴포넌트' 유닛을 활용한다. 순수 자바스크립트로만으로 리액트를 사용할 수도 있지만, JSX를 사용하는 것이 자바스크립트 코드 안에서 UI관련 작업을 할 때 더 도움이 된다. 

       

       

       

       

      * Reference : 생활코딩 React (https://opentutorials.org/module/4058), 리액트 공식페이지(https://reactjs.org/)

      댓글

    티스토리툴바