노마드 코더 니꼴라스와 만드는 진짜 리액트 앱 공부

안녕하세요. 방구석 개발자입니다. 

react icon

노마드 코더 니꼴라스와 만드는 진짜 리액트 앱 책을 보면서 리액트를 공부했습니다.

공부한 것들을 정리 해보겠습니다.

---

리액트 기본 동작 원리

자바스크립트 코드를 리액트가 해석 후 html로 끼워 넣는다.

ex) index.js 를 리액트가 해석 한다 -> index.html에 끼워 넣는다.

리액트 기초 개념

리액트는 반드시 알아야 할 기초 개념이 있다. 바로 컴포넌트, JSX, props 이다. 이 3가지 개념을 꼭 알아야 한다.

컴포넌트

//App.js
import React from 'react'

function App(){
    return (
        <div>
          <h1>Hello</h1>
        </div>
    );
}

코드에서 App컴포넌트를 정의 했고 App컴포넌트는 HTML을 반환하고 있다.

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
    <App />
  ,document.getElementById('root')
);

 

import App from './App';
ReactDOM.render(<App /> ,document.getElementById('root'));

이 부분이 App컴포넌트를 임포트하여 사용한 것이다.

리액트는 컴포넌트와 함께 동작하고, 리액트 앱은 모두 컴포넌트로 구성된다.

JSX 

JSX는 HTML과 자바스크립트를 조합한 문법이다 자바에서 jsp에 해당된다.

index.js 에서 return 부분이 JSX이다.

props

props는 컴포넌트끼리 전달하는 데이터이다. 함수의 매개변수처럼 props로 데이터를 전달해 원하는 데이터값을 표현하고 보여줄수 있도록 사용한다. props를 사용하면 컴포넌트 재사용이 늘어난다.

//App.js
function Food(props){
    console.log(props);
  return <h1>난 {props.fav}가 좋아.</h1>
}

function App() {
  return (
      <div>
        <h1>Hello React</h1>
        <Food fav="토마토"/>
      </div>);
}

export default App;

<Food fav="토마토"/> 에서 fav에  토마토를 props로 전달한다. Food 함수에서 {props.fav}로 props를 사용한다.

map() 

map() 함수는 배열의 모든 원소마다 특정 작업을 하는 함수를 적용하고, 그 함수가 반환한 결과를 모아서 배열로 반환해준다.(자바의 스트림API와 비슷할거같다.)

function Food({name, picture}){
  return (
      <div>
        <h2>난 {name}가 좋아.</h2>
        <img src={picture}/>
      </div>
  );

}

const foodILike=[
    {
        name:'김치',
        image:'https://cdn.imweb.me/thumbnail/20200415/6b6e035658bac.png',
    },
    {
        name:'토마토',
        image:'https://lh3.googleusercontent.com/proxy/GB3Bh4ZP_Z8p3RlGuIemhHDtXhGKv4BZCHhA0TKAfwWjF7z4CFaOLmWcDvuUmf3V49_uFDFFEnPSyaO6rlM43tyOjpH7xhUX6Fzk0A4eTx2M0kPqJw',
    },
    {
        name:'감자',
        image:'http://health.chosun.com/site/data/img_dir/2020/05/07/2020050702573_0.jpg',
    }
];//foodLike 변수에 빈 배열을 저장한다.

function App() {
  return (
      <div>
          {foodILike.map(dish => (<Food name={dish.name} picture={dish.image}/>))}

      </div>);
}

export default App;

구현된 화면 : map을 이용하여 컴포넌트를 재활용

foodILike.map을 사용하여 Food 컴포넌트를 반복시켰다.

또한 key props 가 있는데 각 컴포넌트의 구분을 하기 위해 필요하다 다만 리액트 내부에서 사용되는 특수한 props라서 컴포넌트 자체에 직접 전달되지는 않는다

prop-types 설정하기

prop-types는 각 prop이 문자열인지 숫자인지 type을 정해주어서 검사를 해주는 방법이다. 아래와 같이 사용한다.

string 는 문자열 number 숫자 isRequired : 필수값일때 넣는다 필수값이 아니면 생략해준다.

prop-type공식문서 : https://github.com/facebook/prop-types

Food.propTypes = {
    name : PropTypes.string.isRequired,
    picture : PropTypes.string.isRequired,
    rating : PropTypes.number.isRequired,
}

state와 클래스형 컴포넌트

state는 동적 데이터를 다룰 때 사용한다. 동적 데이터란 말 그대로 변경될 가능성이 있는 데이터를 말한다.

state는 클래스형 컴포넌트에서 사용할 수 있는 개념이다. 그러므로 클래스형 컴포넌트도 함께 알아야 한다.

---

class App extends React.Component{ // App클래스는 리액트컴포넌트를 상속받았다.
//클래스형 컴포넌트는 jsx를 반환하기 위해 render() 함수를 사용한다.
state={//state를 사용하려면 받드시 클래스형 컴포넌트 안에서, 소문자를 이용하여 state라고 적어야 한다.
count:0,
};
add = () =>{
this.setState({count:this.state.count+1});
}
minus = () =>{
this.setState({count:this.state.count-1});
}
render(){
return(
<div>
<h1>The number is : {this.state.count}</h1>
<button onClick={this.add}>Add</button>
<button onClick={this.minus}>Minus</button>
</div>);
}
}

---

state는 자체 수정이 안된다. this.state.count+1 또는 this.state.count-1 로 제어가 되지 않는다. setState() 함수를 이용하여 변경해줘야 한다. state가 변경이 되면 reder() 함수가 실행되고 자동으로 화면이 업데이트 된다. 화면이 변경될때 변경분만 바뀌므로 속도가 빠르다.

클래스형 컴포넌트의 생명주기 함수

생명주기 함수는 클래스형 컴포넌트의 일생을 만들어준다. 종류가 많아서 몇가지만 살펴보려고 합니다.

constructor(): render함수보다 먼저 실행되는 함수

render(): 화면에 그려지는 함수

componentDidMount() : 컴포넌트가 처음 화면에 그려지면 실행되는 함수

componentDidUpdate() : 화면이 업데이트되면(새로 그려지면) 실행되는 함수

componentWillUnmount() : 화면에서 컴포넌트가 떠날때 실행되는 함수

constructor -> render -> componentDidMount -> componentDidUpdate -> componentWillUnmount 순으로 함수가 호출된다.

 

Router

리액트는 router를 이용하여 다른 주소에 다른 화면을 보여주는 라우팅기법으로 화면 출력을 제어 할 수있다.

---

회고

github: https://github.com/lsm7179/movie_app/blob/master/package.json

url: https://lsm7179.github.io/movie_app/#/

Movie App

React를 공식사이트에서 해보고 이번엔 책을 가지고 클론 코딩 해봤습니다.

이 책은 기본적인 부분을 아주 친절하게 알려줘서 초보자(글쓴이)에게 아주 좋은 길잡이가 되어주었습니다.

감사합니다.