시작하기에 앞서..

📄 자바스크립트 라이브러리 '리액트'

• 리액트 이전에는 DOM을 다루는 방법으로 jQuery가 최고였으나 이제는 리액트가 그 자리를 차지합니다.
• 리액트는 라이브러리 라 가볍습니다.
• 리액트는 새로운 Virtual DOM 만들어서 현재 브라우저에 보여지고 있는 진짜 DOM과 비교해 어떤 부분이 달라졌는지 찾고 바뀐 부분만 DOM에 적용합니다.
• 리액트의 도입으로❓
  • 미리 렌더링을 최적화합니다.
  • 컴포넌트 단위 관리라는 효율적인 방식 도입이 가능해졌습니다.

Hello World

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

TSX 소개

• typescript로 작성된 jsx라고 생각하면 될 것 같습니다.

타입스크립트를 사용하는 프로젝트 생성하기

npx create-react-app demo(프로젝트명) --template typescript

• --template 을 안쓰면 js 템플릿으로 깔립니다.

라이브러리도 타입 알아야 사용할 수 있습니다.

• yarn add @types/라이브러리 이름
  • 이렇게 써줘야 에러 안뜹니다.
  • 만약 typescript로 라이브러리 변환이 안되있다면 아래와 같이 tsconfig.json에 코드를 추가해주면 됩니다. (그러나 이런 경우는 극히 드뭅니다.)

tsconfig.json

"noImplicitAny" : false

Props vs State

• 둘 다 데이터를 다룰 때 사용하는 개념입니다.

Props란?

• 부모 컴포넌트가 자식 컴포넌트한테 전달하는 데이터로, 자식 컴포넌트 입장에서는 읽기 전용의 데이터입니다.
• 아래는 Props의 예시입니다.

number.tsx

import React from "react";
import styled from "styled-components";

const Container = styled.span``;

interface IProps {
    count: number;
}

const Number: React.FunctionComponent<IProps> = ({ count }) => (
    <Container>{count}</Container>
);

export default Number;

app.tsx

import React, { Component } from 'react';
import Number from "./Number";

interface IState {
  counter: number
}

class App extends Component<{}, IState> {
  state = {
    counter: 0
  };

  render() {
    const { counter } = this.state;
    return <div>
      <Number count={counter} /> <button onClick={this.add}>Add</button>
    </div>;
  }

  add = () => {
    // this.setState({counter: 'hello'}) // 안된다고 알려줌
    this.setState(prev => {
      return {
        counter: prev.counter + 1
      };
    });

  };
}

export default App;

State란?

• 나의 입장에서 쓰기 전용의 데이터입니다.
• 동적인 데이터를 다룰 때 사용합니다.

타입스크립트에서 사용하려면 타입을 지정해주는 부분이 있어야합니다.

app.tsx 오류 발생

class App extends Component {
	state = {
	counter: 0 
};

render() {
	const {counter} = this.state;
	return <div>{counter}</div>;
}

add = () = > {
	this.setState(prev => {
		return {
			counter: prev.counter + 1
			};
		});
	};
}

app.tsx 개선 후

import React, { Component } from 'react';

interface IState {
  counter: number
}

class App extends Component<{}, IState> {
  state = {
    counter: 0
  };

  render() {
    const { counter } = this.state;
    return <div>{counter}<button onClick={this.add}>click</button></div>;
  }

  add = () => {
    // this.setState({counter: 'hello'}) // 안 된다고 알려줍니다.
    this.setState(prev => {
      return {
        counter: prev.counter + 1
      };
    });
  };
}

export default App;

🤔 공부를 하면서

• 리액트를 타입스크립트로 작업하는 것은 초심자의 입장에서 조금 어렵다고 느꼈습니다.
• 먼저 jsx 공부가 필요할 것 같습니다.