아는 개발자

리액트의 useEffect 라이브러리는 컴포넌트나 state에 변화가 생길 때 호출되는 함수다. 두개의 인자를 받는데 첫째 인자는 변경시 호출할 콜백함수고 두번째 인자는 상태를 변경을 감지할 state를 설정한다.  state를 별도로 설정하지 않으면 componentDidUpdate, componentDidMount랑 동일한 역할을 하게 된다. 

const NoteApp = () => {
  
  const [notes, setNotes] = useState([])
  const [title, setTitle] = useState('')
  const [body, setBody] = useState('')

  useEffect(() => {
    console.log('load data')
    const notesData = JSON.parse(localStorage.getItem('notes'))
    if (notesData) {
      setNotes(notesData)
    }
  }, [])

  useEffect(() => {
    console.log('update notes')
    const toJson = JSON.stringify(notes)
    localStorage.setItem('notes', toJson)
  }, [notes])

  useEffect(() => {
    console.log('useEffect called')
  })

위와 같이 여러개의 useEffect 함수를 둘 수 있다. 첫번째 useEffect에서는 두번째 인자에 빈 배열을 넣었는데 이러면 최초 한번만 호출되게 된다. componentDidMount 콜백과 기능이 유사하다. 두번째 useEffect 함수에서는 notes 상태 값을 인자로 두었다. notes 상태의 값이 변경될 때마다 함수가 호출된다. 세번째 useEffect 함수는 전달인자를 따로 넣지 않아서 내부에 어떤 state가 바뀌더라도 새롭게 호출된다. 

useState는 react 에서 비교적 최근에 나온 state 관리 라이브러리다. 기존에는 컴포넌트 생성할 때 state로 두고 싶은 변수들을 하나의 오브젝트로 관리했다면 useState 라이브러리를 사용해서 변수 별로 나눠서 선언할 수 있다. 

const NoteApp = () => {
  
  const [notes, setNotes] = useState([])
  const [title, setTitle] = useState('')
  const [body, setBody] = useState('')

useState 인자로 object를 받는데 이 값은 state의 초기 값이다. 배열, 정수형 인자, 문자열 모두 가능하다. 리턴 값으로는 길이가 2인 배열을 내놓는데 첫번째는 state 변수 값이고 두번째 값은 state 값을 변형 시킬 수 있는 setter 함수다. 

 const addNote = (e) => {
    e.preventDefault()
    setNotes([
      ...notes, 
       { title, body }
    ])
    setTitle('')
    setBody('')
  }

  const removeNote = (title) => {
    setNotes(notes.filter((note) => note.title !== title))
  }

기존에는 setState를 이용해서 모든 오브젝트를 다시 초기화해야 했다면 useState에서 넘어온 setter 함수를 이용해 내가 업데이트 하고 싶은 state만 명시적인 함수로 호출이 가능하기 때문에 관리가 한결 수월해진 측면이 있다. 한 컴포넌트 내에서 관리할 state 인자가 많아질수록 유용해질 기능인 것 같다.

connect 함수는 리액트 앱의 하위 컴포넌트에서 redux store를 접근하는 것을 가능하게 해주는 역할을 한다. 이 함수를 이용해서 컴포넌트 단에서 redux store에 접근하고 액션을 호출 할 수 있게 된다. 이번 포스트에서는 간단한 예제로 connect 함수를 통해 redux store를 사용하는 방법을 다뤄보려고 한다.

0. 준비작업

connect 함수 소개를 위해 예제와 텍스트와 숫자를 담당하는 redux를 만들었다.

BlogStore.js

import { createStore, combineReducers } from 'redux';

const textReducerState = {
    text: '',
    name: 'textReducer'
};

const textReducer = (state = textReducerState, action) => {
    switch (action.type) {
        case 'SET_TEXT':
            return {
                ...state,
                text: action.text
            };
        default: 
            return state;
    }
}

const numberReducerState = {
    numberState: 30,
    name: 'numberReducer'
};

const numberReducer = (state = numberReducerState, action) => {
    switch (action.type) {
        case 'SET_NUMBER':
            return {
                ...state,
                number: action.number
            };
        default: 
            return state;
    }
};

export const configureStore = () => {
    const store = createStore(
        combineReducers({
            text: textReducer,
            number: numberReducer
        })
    );
    return store;
};

BlogActions.js

export const setText = (
    text = ''
) => ({
    type: 'SET_TEXT',
    text
});

export const setNumber = (
    number = 0
) => ({
    type: 'SET_NUMBER',
    number
});

1. Provider 

configureStore() 함수를 통해 store를 생성하고 Provider 태그에 store를 속성값으로 넣는다. 이러면 하위에 추가되는 component에서 redux store를 바라볼 수 있는 창구가 만들어진다.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { configureStore } from './BlogStore';
import BlogMain from './BlogMain';

const store = configureStore();


const jsx = (
    <Provider store={store}>
        <BlogMain />
    </Provider>
);


ReactDOM.render(jsx, document.getElementById('app'));

2. connect 

하위 컴포넌트 단에서는 Provider에서 제공하는 store 함수를 connect 함수를 통해서 받아온다. 함수 형식이든 클래스 형식이든 받는 방식은 동일하다. 

2.1 클래스형식

import React from 'react';
import { connect } from 'react-redux';
import BlogDetail from './BlogDetail';


class BlogMain extends React.Component {
    render() {
        console.log(this.props.text)
        console.log(this.props.number)
        return (
            <div>
                <p>BlogMain component</p>
                <BlogDetail />
            </div>
        )
    };
};
const mapStateToProps = (state) => {
    return {
        text: state.text,
        number: state.number
    }
};
export default connect(mapStateToProps)(BlogMain);

클래스 형식 컴포넌트를 export 할 때 connect 함수를 사용하고 첫번째 인자에 mapStateToProps 함수를 넣었는데 redux store에 있는 값을 컴포넌트에 어떻게 넘겨줄지 세팅하는 작업이다.  넘겨 받은 값은 component의 props에 들어가서 호출 할 수 있다. 아래 사진은 render() 함수 안에서 console로 찍은 로그다. textReducer와 numberReducer가 출력되는 것을 볼 수 있다.

2.2 함수 형식 

import React from 'react';
import { connect } from 'react-redux';

const BlogDetail = (props) => (
    <div>
        <p>BlogTextDetail</p>
        <p>{props.text.name}</p>
    </div>
);
const mapStateToProps = (state) => {
    return {
        text: state.text
    };
};

export default connect(mapStateToProps)(BlogDetail)

함수 형식도 크게 다르지 않다. 컴포넌트 내에서 호출 할 때 this를 부르지 않아도 된다는 점만 다르다. 위 코드로 호출하면 아래 그림처럼 화면 뷰가 그려진다.

3. Action 

connect로 컴포넌트에 전달 할 때 store만 전달 하는것이 아니라 action을 넣을 수 있는 dispatch 함수까지 전달된다. react 디바이스 툴을 사용해보면 component의 props 안에 dispatch가 들어있는 것을 확인 할 수 있다. 

실제로도 잘 사용할 수 있을 지 테스트 해보자. 방금 전에 사용한 BlogDetail 컴포넌트를 살짝 수정해서 현재 store에 저장된 text를 출력하고 버튼을 추가하고 클릭하면 text를 BlogDetail로 바뀌도록 했다.

import React from 'react';
import { connect } from 'react-redux';
import { setText } from './BlogActions';

const BlogDetail = (props) => (
    <div>
        <p>BlogTextDetail</p>
        <p>current store text value: {props.text.text}</p>
        <button onClick={() => {
            props.dispatch(setText('BlogDetail'))
        }}>Change text to BlogDetail</button>
    </div>
);

const mapStateToProps = (state) => {
    return { text: state.text};
};

export default connect(mapStateToProps)(BlogDetail)

함수를 실행하고 버튼을 클릭하니 화면이 아래와 같이 store의 text 값이 BlogDetail로 변경됐다.

4. 총평 

코딩을 처음 하는 분이면 이걸 왜 이렇게까지 해야할지 이해가 안될 수 있을 것 같은데 이전에 mvvm, mvc 패턴을 경험해본 개발자들에게는 redux가 크게 어려울 것 같지 않다. 강의 들을 때는 헷갈렸는데 실제로 코드로 짜보니까 어떤 식으로 구조를 잡아야할 지 느낌이 온다. 물론 자바스크립트 언어 특성상 state 세부 이름을 관리할 때 꽤 귀찮음을 겪을 것 같긴 하다.

react 에서는 react-router-dom 라이브러리를 통해  들어 오는 주소 별로 별도의 페이지를 보여줄 수 있는 라우팅 기능을 제공한다. 리액트의 특성에 맞게 이 라이브러리는 어떤 페이지로 진입 했을 때 어떤 페이지를 보여 줄 것인지를 컴포넌트 단위로 뽑을 수 있다.

1. 라이브러리 임포트 

리액트와 필요한 라이브러리를 임포트 한다.

import React from 'react';
import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom';

2. Route

const AppRouterExample = () => (
    <BrowserRouter>
        <div>
            <Switch>
                <Route path="/" component={() => (<h2>This is DashboardPage</h2>)} exact={true} />
                <Route path="/create" component={() => (<h2>This is Create Page</h2>)} exact={false} />
                <Route path="/edit/:id" 
                    component={ (props) => (<h2>This is Edit Page {props.match.params.id}</h2>)} 
                        exact={true} />
                <Route path="/help" 
                    component={() => (<h2>This is help page</h2>)} 
                    exact={true} />
                <Route component={() => (<h2>This is not 404 page</h2>)} />
            </Switch>
        </div>
    </BrowserRouter>
);

<BrowserRouter> 와 <Switch> 태그 내에 위치한 <Route> 태그로 관리하고 싶은 경로를 설정할 수 있다. 이렇게 두면 애플리케이션이 관리하는 경로를 설정 할 수 있게 된다.

2.1 path 

라우팅할 경로를 정의하는 값이다. 위 페이지에서는 /create, /edit, /help 페이지를 경로로 뒀다. edit 페이지의 경우에는 수정하려는 데이터의 id를 인자로 받을 수 있고 이 값은 component에 전달된다. component 객체에 props로 전달되며 저장되는 필드는 컴포넌트에 있는 값과 같다.

2.2 component 

해당 경로로 들어올 경우 어떤 component를 보여줄 것인지를 결정하는 곳이다. 직접 컴포넌트를 만들어서 넣을 수 있으며 이 예제에서는 component 필드 내에서 보여줄 수 있는 값을 넣었다. /edit 경로를 보면 props로 Route로부터 인자를 받아오는데 /edit에서 받아오는 id 정보를 확인 할 수 있다.

2.3 exact 

exact는 이 경로를 명확하게 볼 것인지 말것인지를 설정한다. 평소 익히 쓰던 path와 다른 개념이라 와닿지 않을 것 같은데 exact값이 false면 앞에 부분만 맞아도 해당 페이지로 렌딩이 된다. 예로 /create 는 exact 값이 false이기 때문에 /create/34 로 접근하든, /create/edit 으로 접근하든 모두 create 페이지로 렌딩해준다.

3. NavLink 

const AppRouterExample = () => (
    <BrowserRouter>
        <div>
            <div>
                <h1>This is Header</h1>
                <NavLink to="/" activeClassName="is-active" exact={true}>Dashboard</NavLink>
                <NavLink to="/create" activeClassName="is-active">Create Expense</NavLink>
                <NavLink to="/edit" activeClassName="is-active">Edit Expense</NavLink>
                <NavLink to="/help" activeClassName="is-active">Help</NavLink>
            </div>

NavLink는 하이퍼링크 기능이고 스타일링을 가능하게 한다. 내부에 있는 필드 값을 바꿔서 더 링크를 더 이쁘게 만들 수 있다.

react는 state를 이용해서 컴포넌트의 상태를 관리하는데 state 하나에 들어가는 element가 많아질수록 관리하기가 힘들어지는 문제가 있다. 그래서 react에서는 redux라는 라이브러리를 이용해서 state를 좀더 쉽게 관리할 수 있게 해줬다. 크게 state를 관리하는 store와 store 를 변경하려는 dispatch 그리고 변경 작업을 일괄 관리하는 reducer로 나뉘는데 이번 포스트에서는 각각에 대해서 간단히만 다뤄보려고 한다.

1. createStore 

redux로 관리할 state 집합을 만드는 작업이다. 함수의 인자로는 reducer를 받는다. 

const store = createStore(countReducer);

2. action 

state를 바꾸기 위해 취하는 액션이다. 단 여기에는 액션이 들어가지 않고 액션에 필요한 데이터만 들어간다. 변수 이름을 자유롭게 입력할 수 있는데 type 필드에 액션의 종류를 정해주는게 일반적인 것 같다. dispatch 함수를 통해 액션을 실행 할 수 있다.

const incrementCount = ({incrementBy = 1} = {}) => ({
    type: 'INCREMENT',
    incrementBy
});

store.dispatch(incrementCount())

3. reducer 

액션을 대신 처리해주는 부분이다. MVC로 치면 controller에 해당하는 부분으로 실제 state 값의 변경을 담당한다. reducer에서 state에 대한 변경을 일괄적으로 담당하기 때문에 관리하기가 한결 쉬워지는 장점이 있다.

// Reducer
// 1. Reducers are pure functions
// 2. Never change state or action 

const countReducer = (state = { count: 0 }, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return {
                count: state.count + action.incrementBy
            };
        default:
            return state;
    }
};

4. subscribe 

store의 subscribe 함수로 state 변경에 대한 변화를 구독 할 수 있다. reducer에서 업데이트 값들은 모두 여기를 거치게 된다. state 변경 값을 화면에 노출해야하는 경우에는 이 함수를 사용하면 된다.

store.subscribe(() => {
    console.log(store.getState());
});