🔖 1-3. 첫 리액트 컴포넌트(아직은 Class)

리액트에 대한 입문자들의 착각

리액트를 뭔가 특별한 것이라고 생각한다. 그것은 엄청난 착각이다.

결국에는 웹브라우저는 html,css,js밖에 못읽는다. 특히 화면을 구성하는것은 html,css 이여야 하고, 그에 대한 동작은 js여야 한다.

여기서 리액트라는게 뭔가 새로운 존재가 아니라 리액트도 결국은 자바스크립트일 뿐이고, 자바스크립트로 html,css를 만들어내는 그런 존재일뿐이다.

그래서 우리는 리액트로 프로그래밍을 하더라도 결과물은 html,css,js가 나와야지만 브라우저가 파일들을 읽고 화면에 표시 할 수 있다.

리액트가 특별한게 아니라 자바스크립트라는점 이부분을 꼭 명심하자!

create-react-app 을 하면 초반에 셋팅이 쫙 되고 그걸 실행하면 "hello world"같은 앱이 딱 뜨는데 배우는 것이니까 create-react-app을 사용하지않고 원시적인 형태 html 부터 시작한다.

 

 

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<!-- React 라이브러리 불러오는거 개발용 -->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<!-- ReactDOM 라이브러리 불러오는거 개발용 -->
<!--<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>-->
<!-- React 라이브러리 불러오는거 배포용 -->
<!--<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>-->
<!-- ReactDOM 라이브러리 불러오는거 배포용 -->

실무에서는 위처럼 사용 할 일은 거의 없다. 웹팩 바벨로 보통 처리하기 때문이다.

 

 

<script>
  class LikeButton extends React.Component {} // 클래스 방식

  const LikeButton = () => {}; // 함수 방식
  function LikeButton() {} // 함수 방식
</script>

 

리액트에서는 크게 두가지 방식이 있다.

1. 클래스로 하는 방식

2. 함수로 하는 방식

클래스는 99% 요즘 거의 안쓰인다고 보면 된다.

1% 쓰는곳은 ErrorBoundary라는 곳에서 쓴다.

 

 

 

 

 

클래스로 하는 방식

<script>
  class LikeButton extends React.Component {
    constructor(props) {
      super(props);
      this.state = { liked: false };
    }
    render() {
      if (this.state.liked) {
        return 'You liked this.';
      }

      return React.createElement(
        'button',
        { onClick: () => this.setState({ liked: true }) },
        'Like'
      );
    }
  }
</script>

정말 원시적인 형태이다. 실무에서 볼 일이 거의 없을 수도 있다.

 

그런데 기본기 이니까 중요하다.

리액트는 코드를 작성을 하는데 이 자바스크립트 코드가 화면도 그려주고 css도 입혀주고 그런걸 알아서 다 한다.

그래서 사실상 자바스크립트로 html,css,js 전부 컨트롤 하는거기 때문에 자바스크립트가 중요하다.

 

그리고 리액트를 할때 명심해야할것 🔥

1. 리액트는 자바스크립트이다.

2. 리액트는 데이터 중심으로 움직인다.

`<script></script>`를 제외한 위 코드전체를 컴포넌트라 부르는데, 컴포넌트란 데이터와 화면을 하나로 묶어둔 덩어리라고 보면 된다.

데이터는 `this.state = { liked: false };`이고,

화면은 `render()`의 리턴부분이다.

 

 

return React.createElement(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

리액트가 해결하고자 하는 부분은 데이터와 화면의 일치이다. 그래서 데이터가 바뀌면 화면은 자동으로 바뀌게 되어있다. 간단하게는 화면의 바뀔부분들을 state로 만들어두면 된다.

그래서 html을 실행을 해보면 아무것도 안뜰것이다.

왜 안뜨냐면 컴포넌트를 만들었는데 컴포넌트를 화면에 그리는것을 안했기 때문이다.

 

 

 

<script>
  ReactDOM.render(
    React.createElement(LikeButton),
    document.querySelector('#root')
  );
</script>

위 코드를 해석하자면 LikeButton이라는 컴포넌트를 아이디가 root인 태그 안에다 그린다는 뜻이다.