Chapter7. Posts 1편
이번 시간은 노마드 코더의 포스트 Chapter 7 편입니다. 이 편에서 중요한 이슈로 React 공부를 하고 넘어가고자 합니다. 키워드는 아래와 같습니다.
1편
- useEffect
- setTimeout
- react-autosize-textarea
2편
- react-helmet
- propTypes
- isRequired
- arrayOf
useEffect
useEffect에 대해 설명하겠습니다. Hooks 컴포넌트를 사용하며 저는 코드가 매우 짧아지고 간결하게 사용할 수 있다고 생각해 매우 만족하며 쓰고 있습니다. 다만 useState, useEffect 등과 같이 의미는 알지만 무언가 전부다 내 코드라고 하기에는 조금 찜찜한 구석들이 있어 앞전에 useState 편은 다루었듯이 useEffect에 대해 공부하고자 합니다.
useEffect는 컴포넌트가 렌더링 되는 시점에 맞추어 원하는 작업을 시행할 수 있도록 설정하는 Hooks입니다. 많은 분들이 Class Component의 componentDidMount와 componentDidUpdate를 합쳐놓은 형태라고 생각하고 또, 그렇게 사용하고 있습니다.
useEffect는 기본적으로 렌더링 되고 난 직후마다 실행됩니다. 또한 두번째 파라미터에 무엇을 넣느냐에 따라 실행 조건이 달라집니다. Component가 Unmount 되기 전이나 Update 되기 전에 어떤 작업을 수행하려면 useEffect에서 cleanup 함수를 반환해주면 됩니다.
useEffect를 componentDidMount처럼 사용하기
useEffect(fn, [])으로 가능합니다. componentDidMount와는 다르게 prop과 state를 가지고 있습니다. 따라서 콜백 안에서 초기 prop과 state를 확인할 수도 있습니다. 최신 상태를 원한다면 ref에 담아둘 수 있습니다. 다만 useEffect의 모델은 componentDidMount와 같은 다른 라이프사이클 메서드와 다른 점을 확실하게 알고 있어야 합니다.
useEffect안에서 두번째 인자로 오는 배열 []
[]은 리액트 데이터 흐름에 관여하는 어떠한 값도 사용하지 않기에 한번 사용하기에 안전한 값을 넣어 주는 것이 일반적인 사용 값입니다.
자, 그럼 코드를 통해 한번 알아보겠습니다. 위의 두가지를 조합하여 사용해보겠습니다.
특정 값이 업데이트 될 때 사용하기 class
componentDidUpdate(prevProps, prevState) {
if (prevProps.value !== this.props.value) {
function();
}
}
특정 값이 업데이트 될 때 사용하기 Hooks
useEffect(() => {
console.log(someThing);
}, [someThing]);
처럼 사용합니다. 여기서 cleanup 합수를 return에서 반환하게 되면
useEffect(() => {
console.log('effect');
console.log(someThing);
return () => {
console.log('cleanup');
console.log(someThing);
};
});
이렇게 함수를 쓸 수 있습니다. 자세한 내용은 velopert Hooks에서 찾아볼 수 있습니다.
setTimeout
노마드 코더는 인스타그램의 Slide를 만들기 위하여 setTimeout을 사용했는데요. setTimeout는 javascript의 기본 함수로 일정한 시간 후에 작업을 한번 실행합니다. 기본적으로 setInterval 과는 달리 지정된 시간을 기다린후 작업을 수행하고, 다시 일정한 시간을 기다린후 작업을 수행하는 방식입니다. 지정된 시간 사이에 작업 시간이 추가 되는 것입니다. clearTimeout() 을 사용해서 작업을 중지합니다.
src/Component/Post/PostContainer.js
const slide = () => {
const totalFiles = files.length;
if (currentItem === totalFiles - 1) {
setTimeout(() => setCurrentItem(0), 3000);
} else {
setTimeout(() => setCurrentItem(currentItem + 1), 3000);
}
};
useEffect(() => {
slide();
}, [currentItem]);
와 같이 사용하였습니다. 여기서 useEffect를 사용하여 unMount될 때 currentItem을 호출하려고 사용하였습니다.
react-autosize-textarea
react-autosize-textarea는 commnets를 넣을 input 박스의 크기를 자동적으로 조절해주는 기능을 합니다.
yarn add react-autosize-textarea로 설치하신 다음에 import하여 사용하시면 됩니다.
src/Component/Post/PostContainer.js
const Textarea = styled(TextareaAutosize)`
border: none;
width: 100%;
resize: none;
font-size: 14px;
&:focus {
outline: none;
}
`;
와 같이 styled-component로 Css를 입혀 일반 컴포넌트처럼 사용하시면 아래와 같은 결과를 얻을 수 있습니다.
이 때 Enter키를 누르면 다음줄로 전환되는 것을 볼 수가 있는데 이때는
src/Component/Post/PostContainer
const onKeyPress = async event => {
const { which } = event;
if (which === 13) {
event.preventDefault();
try {
const {
data: { addComment }
} = await addCommentMutation();
setSelfComments([...selfComments, addComment]);
comment.setValue("");
} catch {
toast.error("Cant send comment");
}
}
};
와 같이 which를 이용하여 Enter의 KeyCode 값인 13을 사용하였을 때 addComment 함수가 실행되도록 하면 됩니다.
이상으로 노마드코더의 #7.Post의 내용 첫편을 마치겠습니다. 두번째 편에서는
- react-helmet
- propTypes
- isRequired
- arrayOf
을 다루어 보겠습니다.
Leave a comment