리액트 빠샤빠샤 공부해보기!

https://min-jeong96.github.io/react-tic-tac-toe/
▲ Github Pages 제공 기능을 이용해 배포한 주소

Github Source Code는 여기!

나름 반응형이다. (모바일과 웹 둘 다 접속 가능하다.)

---

react 공식 문서의 튜토리얼 링크를 따라해본다.
Angular 사용하던 회사 입사하고 온보딩 기간에 제일 먼저 한 게 Angular도 공식 가이드 사이트의 튜토리얼 일주일 동안 완성시키기 였는데... 옛날 생각나고 그런다.
(주소에 firebase 기본 도메인 들어가있는 거 진짜 짱이다.)

---

React

• 유저 인터페이스 구현을 위한 선언적, 효율적이고 유연한 JavaScript 라이브러리.
• XML과 비슷한 태그를 사용한다.
• React는 여러 종류의 컴포넌트를 갖는다.
  (컴포넌트: 재사용 가능한 독립적인 업무, 기능 수행 가능한 단위. 모듈.)
• 커스텀 React 컴포넌트를 쉽게 구성할 수 있다. 각 컴포넌트는 캡슐화되어 독립적으로 동작할 수 있기 때문에 간단한 컴포넌트들로 복잡한 UI를 구현할 수 있다.

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

• (React.Component를 상속 받아) 작성한 컴포넌트는 React에게 "무엇을 렌더링하고 싶은지" 알려준다. React는 데이터가 "변경"될 때 올바른 컴포넌트들을 업데이트하고 렌더링한다.
• 하나의 컴포넌트는 props라고 불리는 파라미터를 사용하고, render 메서드를 통해 표시할 뷰 계층 구조, React Element를 반환한다.
• JSX라는 특별한 문법을 사용한다. JSX에서는 중괄호 안에 JavaScript 문법을 사용할 수 있다. 각 React Element는 변수에 저장하거나 프로그램 여기저기에 전달할 수 있는 실제 JavaScript 객체다.
  return (<div />)라고 쓴 코드가 빌드 시에는 Return.createElement('div')로 변환된다. <- 하지만 튜토리얼에서는 createdElement()를 직접적으로 사용하지 않는 대신 JSX를 사용한다고 한다.
  

return React.createElement('div', {className: 'shopping-list'},
	React.createElement('h1', /* ... h1 children ... */),
	React.createElement('ul', /* ... ul children ... */)
);

---

프로젝트 생성하고 띄우기

npx create-react-app <app-name>
npm start

• http://localhost:3000 에서 확인 가능하다.
• create-react-app이 npm command가 아니라고 뜬다.

---

함수형 컴포넌트

// before
Class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={() => this.props.onClick()}>
        {this.props.value}
      </button>
    );
  }
}

// after
function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

• 클래스 컴포넌트보다 더 쉽게 작성할 수 있고, React가 더 효율적으로 최적화할 수 있다는 장점이 있다.

(최종적으로는 불합격한) 프론트엔드 기술 면접에서 React를 전혀 사용해본 적이 없어 공부를 시작한지 일주일 차라고 소개했다. 그러면서 React 튜토리얼 공부하는 이야기가 잠깐 나왔는데, FE팀 면접관 분이 클래스 컴포넌트는 읽을 줄만 알면 되는 정도고 현업에선 전부 Hook을 이용한 함수형 컴포넌트로 개발하게 된다고 알려주셨다. 그래서 면접 보고 온 날 전부 함수형으로 바꿔봤다. 그러면서 자연스럽게 useState, useEffect를 검색해 사용하게 되더라.

---

전체 출처: https://reactjs-kr.firebaseapp.com/tutorial/tutorial.html