React Study [#2] - 끝말잇기

제로초님의 "웹 게임을 만들며 배우는 React"을 보고 학습하는 스터디 입니다.

React Hooks

기존에 사용하던 Class 방식이 아닌 함수형 컴포넌트를 생성하는 방법이다.
기존 React의 Class를 활용한 Component 설정 방법을 개선한 것이다.

• class state

      class GuGuDan extends React.Component {
                state = {
                    first: Math.ceil(Math.random() *9),
                    value: '',
                };
  
            constructor(props) {
                super(props);
            }
  
            render() {
            }
        }

• function state

      const GuGuDan = () => {
          const [first, setFirst] = React.useState(Math.ceil(Math.random()*9));
          const [value, setValue] = React.useState('');

장점

• class를 사용하는 것보다 코드가 많이 줄어든다.
• 컴포넌트의 개수를 관리하는데 용이하다.

WebPack

Webpack이란 html에 들어갈 javascript 파일들을 하나의 자바스크립트 파일로 만들어주는 모듈 번들링이다. Webpack을 사용하려면 Babel을 사용해야한다.

2강 후기

평소에 React 프로젝트 생성할 때 사용하는 create react app을 뜯어보면 babel와 webpack으로 설정되어있다는 것은 처음 알았다. 강의에서 webpack 설정을 하나하나 하는데 각 요소를 제대로 이해할 수 있게 되어서 새로운 경험이었던 것 같다.