[React 기본 강좌] 1. 리액트란 무엇인가? 왜 쓰는가?

티스토리 뷰

기타 🎸/강의

[React 기본 강좌] 1. 리액트란 무엇인가? 왜 쓰는가?

박보희 2019. 12. 14. 15:31

제로초님의 React 기본 강좌 강의를 보고 배운 내용을 정리합니다.

https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn

1-1. 리액트를 왜 쓰는가

· React란?

SPA (Single Page Application)

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

· React의 변화

React.createClass → Class → Hooks(현재)

· React를 왜 쓰는가 ?

1. 사용자 경험

2. 재사용 컴포넌트

3. 데이터 화면 일치 (Synchronize)

1-2. 첫 리액트 컴포넌트

· React DOM (Document Object Model)

React 코드를 웹에 붙여주는 역할을 한다.

React는 선언하고, React DOM은 실행한다.

<html>
  <head>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script>
      const e = React.createElement;

      class LikeButton extends React.Component {
        //component가 실행될 떄 제일 먼저 실행되는 부분
        constructor(props) {
          super(props);
        }

        render() {
          // 태그를 만들겠다
          return e('button', null, 'Like'); // <button>Like</button>
        }
      }
    </script>
    <script>
      // 태그를 만든다
      ReactDOM.render(e(LikeButton), document.querySelector('#root'));
    </script>
  </body>
</html>

실행 결과

<html>
  <head>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  </head>
  <body>
    <div id="root">
      <button>Like</button>
    </div>
  </body>
</html>

· webpack

React를 HTML이 실행할 수 있는 JavaScript 파일로 변환해준다.

TMI !

1. 결과를 예측하는 습관이 프로그래밍에서 중요하다.

2. React를 개발할 때 development.js를 사용하고 배포할 때 production.js를 사용한다.

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.js"></script>

1-3. HTML 속성과 상태(state)

· HTML 속성

속성은 객체 형식으로 표현하고, camel case (onclick → onClick)로 표기한다.

render() {
  return e(
    'button', 
    { onClick: () => {this.setState({liked:true})}, type: 'submit' }, // 속성 자리 
    'Like'
  );
}

· 상태 (state)

상태 (state) = 바뀌는 부분, 바뀔 수 있는 부분

상태가 바뀌면 화면도 바뀐다.

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
      // 상태 선언
      this.state = {
        liked: false,
      };
    }

  render() {
    return e('button', {
      onClick: () => {
        // 상태 변경
        this.setState({ liked: true });
      },
      type: 'submit'
    },
    // 상태 반영 
    this.state.liked ? 'Liked': 'Like'); // <button>Like</button>
  }
}

· React 확장 프로그램

Element 단위가 아닌 Component 단위로 확인이 가능하다.

state도 확인이 가능하다.

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko

React Developer Tools

Adds React debugging tools to the Chrome Developer Tools. Created from revision 3816ae7c3 on 11/27/2019.

chrome.google.com

1-4. JSX와 바벨(babel)

· JSX (JavaScript + XML)

render() {
  return 
  <button 
    type="submit" 
    onClick={() => { this.setState({ liked: true }) }}
  >
    { this.state.liked ? 'Liked' : 'Like' }
  </button>
}

· 바벨

바벨은 자바스크립트 컴파일러이다.

최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 바벨이 브라우저가 이해할 수 있는 문법으로 변환해준다.

ES6, ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다.

여기서 바벨이 JSX 문법을 createElement 문법으로 바꿔준다.

<html>
  <head>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      // const e = React.createElement;
    
      class LikeButton extends React.Component {
        constructor(props) { 
          super(props);
          this.state = {
            liked: false,
          }
        }

        render() {
          return 
          // JSX
          <button 
            type="submit" 
            onClick={() => { this.setState({ liked: true }) }}
          >
            { this.state.liked ? 'Liked' : 'Like' }
          </button> 
        
          // createElement
          // e(
          //  'button', 
          //  { onClick: () => { this.setState({ liked: true }) }, type: 'submit' }, 
          //  this.state.liked === true ? 'Liked' : 'Like' 
          // );
        }
      }
    </script>
    <script type="text/babel">
      // JSX
      ReactDOM.render(<LikeButton />, document.querySelector('#root'));
      // createElement 
      // ReactDOM.render(e(LikeButton), document.querySelector('#root'));
    </script>
  </body>
</html>

TMI ! 1 Class = 1 Component 이다.

1-5. 첫 번째 Q&A

· 바벨 폴리필 (Babel Polyfill)

최신 문법은 바벨만 사용해도 되지만 최신 메서드와 객체를 사용하기 위해서는 바벨 폴리필을 추가해주어야 한다.

1-6. 구구단 리액트로 만들기

· state 생각

상태(state) = 바뀌는 부분 이기 때문에 바뀌는 부분을 생각해 state로 만든다.

바뀌지 않는 부분은 태그로 만든다.

· state 등록

constructor 안에 state를 등록한다.

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

· state 사용

this.state.□ 를 사용해 state 값을 가져온다.

render() {
  return (
    <div>
      <div>{this.state.first} 곱하기 {this.state.second} ?</div>
    </div>
  );
}

· state 변경

this.setState({ }) 를 사용해 state 값을 변경한다.

<input 
  type="number" 
  value={this.state.value} 
  onChange={(event) => {this.setState({ value: event.target.value })}} 
/>

TMI ! XML이기 때문에 싱글 태그는 꼭 닫는 태그를 넣어주어야 한다.

// X
<input type="number">
// O
<input type="number" />

1-7. 클래스 메서드

· 여러 개 Component

같은 Components이지만 다른 state를 가진다.

(3개의 구구단 Component를 사용할 때)

ReactDOM.render(
  <div>
    <Gugudan />
    <Gugudan />
    <Gugudan />
  </div>,
  document.querySelector('#root')
);

TMI ! JSX와 JavaScript는 섞어 쓰지 않는 것이 좋다.

render() {
  return (
    <div>
      <input 
        type="number" 
        value={this.state.value} 
        onChange={(event) => {this.setState({ value: event.target.value });}} />
    </div>
  );
}

onChange = (event) => {
  this.setState({ 
    value: event.target.value 
  });
}

render() {
  return (
    <div>
      <input type="number" value={this.state.value} onChange={this.onChange} />
    </div>
  );
}

1-8. Fragment와 기타 팁들

· Fragment

React는 하위에 2개 이상에 태그가 존재할 때, 제일 상단에 태그로 감싸야한다. (무의미한 태그)

<React.Fragement> 태그로 감싸주면 브라우저 상에 나타나지 않는다.

render() {
  return (
    <div> // 무의미한 태그
      <div>{this.state.first} 곱하기 {this.state.second} ?</div>
      <form onSubmit={this.onSubmit}>
        <input type="number" value={this.state.value} onChange={this.onChange} />
        <button>send</button>  
      </form>  
    </div>
  );
}

render() {
  return (
    <React.Fragment>
      <div>{this.state.first} 곱하기 {this.state.second} ?</div>
      <form onSubmit={this.onSubmit}>
        <input type="number" value={this.state.value} onChange={this.onChange} />
        <button>send</button>  
      </form>  
    </React.Fragment>
  );
}

· ( ) 그룹 연산자

무의미한 연산자이기 때문에 여러 개를 사용할 수 있다.

return (((((
  <form onSubmit={this.onSubmit}>
    <input type="number" value={this.state.value} onChange={this.onChange} />
    <button>send</button>  
  </form>  
)))));

· this

function 함수에서 this와 allow 함수에서 this는 다르다.

★ event를 태그 밖에서 정의할 때는 무조건 allow 함수를 사용해야 한다.

// 일반 함수
onChange = function (event) {
  // 여기서 가르키는 this가 달라지기 때문에 화살표 함수를 사용
  this.setState({ 
    value: event.target.value 
  });
}

// 화살표 함수
onChange = (event) => {
  this.setState({ 
    value: event.target.value 
  });
}

TMI !

꼭 Class 안에 constructor를 써줄 필요는 없다.

class Gugudan extends React.Component {
  state = {
    value: '',
    answer: '',
  };
}

1-9. 함수형 setState

· return state

현재 state 값을 사용할 때는 return 안에 state를 적어준다.

인자 값으로는 현재(이전) state를 받을 수 있다.

this.setState({ 
  result: '정답 : ' + this.state.value, // 현재 state 값 사용
  first: Math.ceil(Math.random() * 9),
  second: Math.ceil(Math.random() * 9),
  value: '',
});

this.setState((prevState) => {
  return {
    result: '정답 : ' + prevState.value,
    first: Math.ceil(Math.random() * 9),
    second: Math.ceil(Math.random() * 9),
    value: '',
  } 
});

TMI ! setState는 비동기이다.

1-10. ref

· focus

vanilla.js (순수 자바스크립트)를 사용하는 방법도 있지만 React가 화면 컨트롤을 담당하기 때문에 React를 사용한다.

document.querySelector('input').focus()

onSubmit = (event) => {
  event.preventDefault();
  this.input.focus();
}

input;
onRefInput = (c) => {
  this.input = c;
}

render() {
  return (
    <React.Fragment>
      <form onSubmit={this.onSubmit}>
        <input ref={this.onRefInput} type="number" />
      </form>
    </React.Fragment>
  );
}

· rendering

setState를 통해 state의 값이 변경될 때마다 렌더링이 된다.

렌더링을 많이 할수록 느려진다.

함수를 render 바깥에 작성해야 하는 이유

render 안에 함수를 작성하면 렌더링이 새로 실행될 때마다 함수를 새로 만들기 때문에 비효율적이다.

render() {
  return (
    <input 
      type="number" 
      value={this.state.value} 
      onChange={(event) => {
        this.setState({ 
          value: event.target.value 
        });
      }} 
    />
  );
}

onChange = (event) => {
  this.setState({ 
    value: event.target.value 
  });
}

render() {
  return (
    <input type="number" value={this.state.value} onChange={this.onChange} />
  );
}

저작자표시 비영리 동일조건

'기타 🎸 > 강의' 카테고리의 다른 글

[미운코딩새끼] 4시간 만에 끝내는 파이썬 기초 (0)	2019.12.27
[React 기본 강좌] 2. 리액트 Hooks! (0)	2019.12.14
[React로 NodeBird SNS 만들기] 1. Hello, Next.js (0)	2019.12.09

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

박보희 개발코

티스토리 뷰