252일차 - 현재까지 리액트(React) 느낀 점 정리

 

1. 리액트는 간편하지만, 지켜야할 규약이 좀 있다. 또한, 리액트 관련 라이브러리에 대한 정보를 살펴봐야 할 필요가 있을 것 같다.

 

2. 리액트에서는 함수나 클래스를 통틀어서 컴포넌트라고 부르는 것 같다. 함수형 컴포넌트, 클래스형 컴포넌트라고 부르는 걸로 보니.

 

3. State는 동적 변수를 정의하기 위한 약속인데, 이를 사용하기 위해서는 클래스형 컴포넌트를 사용해야 하며, React.Component를 상속받아야 한다. 그리고 state를 사용하기 위한 약속이 있는데 이는 아래와 같다.

state = {
  변수명: 변수 타입에 따른 값,
}

 

4. 리액트에서 클래스 내부에 함수를 선언할 때는, const나 function을 붙이지 않는다. 형식에 맞춰서 알고리즘을 작성하고 render를 통해서 필요에 의해 함수를 사용해서 화면을 그리는 방식이었다.

class App extends React.Component {
    state = {
        count: 0,
    }
    add = () => {
        this.setState(current => ({
            count: current.count + 1
        }))
    }

    minus = () => {
        this.setState(current => ({
            count: current.count - 1
        }))
    }

    render() {
        return (
            <div>
                <h6>클래스형 컴포넌트 State 테스트 : {this.state.count}</h6>
                <button onClick={this.add}>증가</button>
                <button onClick={this.minus}>감소</button>
            </div>
        )
    }
}

 

5. 리액트 내부에서 style을 작성하기 위해서는 괄호 안에 괄호를 적어서 사용한다.

<button style={{margin: "0 1rem 0 0"}} onClick={this.add}>증가</button>

 

6. 리액트의 생명주기는 constructor, render, componentDidMount 순서이다. 그리고 예외로 화면이 다시 그려질때마다 실행되는 componentDidUpdate 함수가 있다. 이를 통해 좀 더 세부적으로 설정이 가능할 것 같다.

 

7. ES6의 구조 분해 할당 기법이 신기하다. 리액트도 자바스크립트 기반이라서 async, await이 있는데, 책에 적힌 예제에서 구조 분해 할당 기법을 사용한게 신기했다. 하지만, 나는 사용하지 않을 것 같다. 아무래도 아직은 모든 브라우저가 지원하는게 아닐 것 같아서이다. 이것도 확인해봐야 할 필요성이 있다.

getMovieData = async () => {
  // 일반적인 사용법
  // const get_movie = await axios.get("https://yts-proxy.now.sh/list_movies.json")

  // ES6 구조 분해 할당 사용법
  const {
    data: {
      data: { movies },
    }
  } = await axios.get("https://yts-proxy.now.sh/list_movies.json")

  this.setState({movie_list: movies, isLoading: false})
}

 

8. 리액트에서의 라우팅은 신기한데, "react-router-dom" 라이브러리를 통해 라우팅을 한다.

path는 말그대로 주소창 경로를 말하고

exact는 path가 정확하게 일치할 경우에만 화면을 그리는 파라미터라고 한다.

component는 딱 봐도 어떤 자바스크립트로 뷰를 그릴지 참조하는 파라미터로 보인다.

import { HashRouter, Route } from "react-router-dom";
import About from './routes/About'
import Home from './routes/Home'
import Detail from './routes/Detail'

function App() {
    return (
        <HashRouter>
            <Navigation />
            <Route path="/" exact={true} component={ Home } />
            <Route path="/about" component={ About } />
            <Route path="/movie-detail" component={ Detail } />
        </HashRouter>
    )
}

 

9. 리액트의 li태그는 key가 없으면 에러를 낸다.

 

10. 라우팅에서 특정 조건에서만 화면을 보여주고 싶을 때, 사용하는 기법이 특이했다. JQurey와 비슷하면서도 비슷하지않은 기분..?

class Detail extends React.Component {
    componentDidMount() {
        const { location, history } = this.props
        if (location.state === undefined) {
            history.push('/');
        }
    }

    render() {
        const { location } = this.props;
        if (location.state) {
            return <span>{ location.state.title }</span>
        } else {
            return null
        }
    }
}