본문 바로가기
Font-end/React

[REACT] 무작정 시작하기 (2) - Component

by 허도치 2019. 11. 24.

2019/11/23 - [Font-end/React] - [REACT] 무작정 시작하기 (1) - 프로젝트 준비

 

 

이전 포스트에서는 React 프로젝트를 설정하고 간단하게 Hello, World를 출력하는 Component를 생성하여 보았다. 이번 포스트에서는 이벤트가 발생하는 Component를 처리해보면서 전반적인 기능들에 대해서 알아보도록 하겠다. 하나의 Component에 많은 기능들을 함축시켜 설명하려다보니 다소 복잡할 수도 있지만, 최대한 간단하게 정리하도록 해보겠다.

 

 

1. 프로젝트 구조.

   1-1. 폴더 및 파일 추가.

          - [ ./components/utils ] 폴더가 추가되었으며, [ Counter.js, index.js ] 파일을 추가하였음.

 

 

2. Component 생성.

    2-1. Counter.js 작성.

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
32
33
34
35
36
37
38
39
40
import React, { memo, useState, useEffect, useCallback, useRef } from 'react';
 
const Counter = memo((props)=>{
    const initCountRef = useRef();
 
    const [ count, setCount ] = useState(props.init);
 
    const onIncrease = useCallback((event)=>{
        setCount( count + 1 );
    }, [ count ]);
 
    const onDecrease = useCallback((event)=>{
        setCount( count - 1 );
    }, [ count ]);
 
    const onInitCount = useCallback((event)=>{
        const initCount = initCountRef.current.value;
        setCount( initCount );
    }, [ count ]);
 
    useEffect(()=>{
        console.log('[changed count] ', count);
    return ()=>{ console.log('[change count] ', count); }
    }, [ count ])
 
    return (
        <>
            <div><a>count: </a><a>{ count }</a></div>
            <div>
                <button onClick={ onIncrease }>+</button>
                <button onClick={ onDecrease }>-</button>
            </div>
            <div>
                <a>초기값 설정 : </a><input ref={ initCountRef } /><button onClick={ onInitCount }>셋팅</button>
            </div>
        </>
    );
});
 
export default Counter;
cs

          - [ + ] 버튼을 누르면 count가 1씩 증가하고, [ - ] 버튼을 누르면 1씩 감소.

          - 초기값을 설정하면 입력한 값으로 Count가 변경됨.

 

   2-2. 인덱스 생성. [ ./components/utils/index.js ]

1
export { default as Counter } from './Counter'
cs

           - import를 간편하게 처리할 수 있도록 Counter Component를 추가.

 

   2-3. Main Component 수정.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, { Component } from 'react';
 
import { Counter } from './utils'
 
class App extends Component {
    render(){
        return (
            <>
                <span>Hello, World..!!!</span>
                <Counter init={ 0 } />
            </>
        );
    }
}
 
export default App;
cs

           - 3 ln: utils에 있는 Counter Component를 가져오기.

           - 10 ln: porps로 init=0을 전달하며, Counter Component 랜더링함. props는 부모가 자식에게 넘겨주는 변수의 집합.

 

   2-4. 실행화면.

 

 

3. 세부기능설명.

   3-1. 들어가기전...

          - 함수형 Component의 가장 큰 단점은 Component가 호출될 때 마다 함수가 재성성된다는 점이다. 한 두번 재성성되는 것은 크게 문제가 되지 않겠지만, 수백 수천번을 반복해서 재성성이 된다면 메모리의 낭비가 심할 것이다.

          - memo, useCallback, useMemo는 이러한 단점을 보완하고 랜더링을 최적화하기 위해 사용되는 함수들이다.

 

   3-2. memo

          - Component에 변경점이 없다면 재생성되지 않고 기존의 Component를 유지.

 

   3-3. useState

           - state를 변경하기 위해서는 setter함수가 필요하며, state가 변경되면 Component가 다시 랜더링됨.

           - useState는 state와 setter를 생성하는 함수로써, 다음과 같은 형식으로 정의하여 사용함.

           - const [ 변수명, setter명 ] = useState();

 

   3-4. useCallback

           - 주로 이벤트 핸들러를 구현할 때 사용되며, 이벤트 핸들러가 필요할 때만 함수가 생성됨.

           - 두번째 인자에는 state의 목록을 나열하는데, 나열된 state가 변경될 때만 함수가 생성됨.

 

   3-5. useEffect

           - state가 변경되거나 변경된 후를 컨트롤 할 수 있음.

           - React의 라이프사이클API 중 componentDidMount와 componentDidUpdate를 섞어 놓은 기능.

 

   3-6. useRef

           - 특정 태그를 직접 참조하여 현재 상태의 값을 가져올 수 있음.

 

 

 

  이상으로 Counter Component를 생성하여 보았다. 짦은 기간동안 React를 사용해보면서 자주 사용했던 기능들을 최대한 함축시켜 만들어 보았는데, 부족한 부분이 있다면 추후에 더 정리하도록 해보겠다. 이번 포스트에서 잠깐 등장한 Props를 부모에서 자식으로 상속시키는 방식이 아닌 Store에 저장하여 필요한 Component에서 사용할 수 있도록 해주는 Redux에 대해서 알아보도록 하겠다.

댓글