9-6. Progress 컴포넌트 기능 구현하기

이제 게이지바의 기능을 구현해볼 차례 입니다. 게이지바는, 텍스트를 입력하기 시작하면 게이지바가 차오르기 시작하고, 텍스트를 입력하면 0% 으로 바뀌어서 다시 시작하고, 텍스트가 비어있을때에는 0% 으로 고정된상태로 남아있습니다.

우선, 이 기능을 구현하기 위해서는 부모 컴포넌트인 WritePost 로 부터 onPost 와 value 값을 불러와야합니다.

src/components/Home/WritePost/WritePost - WritePost

const WritePost = ({onChange, onPost, value}) => (
    <Wrapper>
        <StyledTextarea
            minRows={3} 
            maxRows={10} 
            placeholder={`의식의 흐름대로 당신의 생각을 적어보세요.\n5초이상 아무것도 입력하지 않으면 자동으로 포스팅됩니다.`}
            value={value}
            onChange={onChange}
        />
        <Progress onPost={onPost} value={value}/>
    </Wrapper>
);

그 다음엔, 기존에 componentDidMount 의 코드는 지워주고, 나중에 인풋의 값이 변경되어서 componentWillReceiveProps 라이프사이클 메소드가 호출 될 때, 기존에 진행중이던 타임아웃이 있다면 해당 타임아웃을 중지시킵니다.

그 다음엔, 상태 값을 0으로 리셋시키고, 내용이 비어있다면 더 이상 진행 하지 않습니다.

내용이 비어있지 않을떄는 setState 를 통해 100 으로 설정을 하는데, 이 때 주의 할 점은 setTimeout 에 한번 감싸줘야 한다는 것 입니다. 그 이유는 하나의 이벤트 루프에서 setState 가 여러번 호출되면 리액트는 이를 한번의 렌더링에 걸쳐서 한꺼번에 하므로 애니메이션 효과가 일어 날 수 없습니다. 이 때 setTimeout 에서는 시간 값으로는 0 을 설정하면 됩니다.

그 다음엔 1초 뒤에 handlePost 메소드를 실행하도록 setTimeout 을 설정하고, 나중에 취소 할 수있도록 timoutId 를 담아둡니다.

handlePost 는 props 로 받은 onProps 를 호출합니다.

src/components/Home/WritePost/Progress.js

(...)

class Progress extends Component {
    state = {
        percentage: 0
    }

    timeoutId = null

    handlePost = () => {
        const { onPost } = this.props;
        onPost(); // props 로 받은 onPost 를 호출합니다
    }

    componentWillReceiveProps(nextProps) {
        // props 가 변할 때마다

        clearTimeout(this.timeoutId); // 기존의 타임아웃을 중지시킵니다

        this.setState({
            percentage: 0
        });

        if(nextProps.value === '') {
            // 내용이 비어있으면
            return; // 여기서 작업을 중단합니다.
        }

        // 상태를 100 으로 변경합니다. 하나의 이벤트 루프에서 setState 가 두번 호출되면
        //  setState 를 한번에 하게 되므로 setTimeout 으로 감싸줍니다. 
        setTimeout(() => this.setState({
            percentage: 100
        }), 0);

        // 나중에 취소 할 수 있도록 this.timeoutId 에 setTimeout 의 결과를 담아줍니다
        this.timeoutId = setTimeout(this.handlePost, 1000);
    }

    render() {
        const { percentage } = this.state;

        return (
            <Wrapper percentage={percentage}/>
        )
    }


}
export default Progress;

이제, 포스트 작성 부분의 유저인터페이스 쪽 기능은 구현이 거의 끝났습니다. 한번 텍스트를 입력해보세요. 게이지바가 차오르기 시작하나요? 그리고, 게이지 바가 다 차올랐을 때 우리가 사전에 만들었었던 handlePost 가 실행되는지도 검토해보세요.