항해99 - 4주차 후기
항해 4주차에는 숙련주로, 리덕스를 활용하였다.
리덕스는 전역상태저장소로써 원래는 부모 컴포넌트의 정보를 자식에게 또 그 자식에게 전달하는게 반복되는 프롭스 드릴링 현상을 막아준다. 아예 리덕스라는 공간에 부모의 정보를 저장하고 꺼내다 쓸수 있게 한다고 이해했다.
지난 주차에는 프롭스 드릴링으로 상태를 내려주기를 반복해서 사용하였는데, 이 경우에는 프로그램이 커지면 그 상태의 출처와 어디서 쓰고 있는지 알기 힘들다는 점 등 프로젝트를 진행하는데 어려움이 많았다.
하지만 리덕스를 활용하여 어디서든 꺼내쓰고 수정할 수 있다는 점이 프롭스 드릴링을 활용하여 프로젝트를 진행할 때보다 편했다. 다만 가져다 쓰고 수정할 수 있다고 바로 이름을 외치고 바꿀 수 있는건 아니고 dispach기능을 활용해서 액션을 리듀서로 보내고 리듀서에서 수정해주는 역할을 했다.
리덕스는 그냥 너무 편하고 좋았다. 지난주에는 리액트를 시작하는 주였어서 너무 어려웠는데 그 주가 바탕이 되고 리덕스를 활용하여 너무 재밌는 한 주였다.
클래스형 컴포넌트와 함수형 컴포넌트의 생김새
📍 클래스형 컴포넌트
class ClassComp extends React.Component{
render(){
return (
<div className = "container">
<h2>class style component</h2>
<p>Number : {this.state.number}</p>
<p>Date : {this.state.date}</p>
<input type="button value="random" onClick={}></input>
)
}
}
📍 함수형 컴포넌트
function FuncComp(props){
return (
<div className="container">
<h2>function style component</h2>
<p>Number : {number}</p>
<p>Date : {_date}</p>
<input type="button" value="random" onClick={
function(){
setNumber(Math.random());
}
}></input>
)
현재 실무에서는 함수형 컴포넌트를 사용하며
클래스형 컴포넌트를 알아야하는 이유는
과거에 만들어진 코드들을 읽고, 함수형으로 바꿀 수 있어야하기 때문이다.
클래스형과 함수형 컴포넌트의 생김새를 비교해보면
실제 뷰에 그려지는 부분을 말하는 'return' 부분에서 클래스형은 render(){} 가 붙는 것을 알 수 있다.
함수형은 자신 자체가 render 이기 때문에 render가 붙지 않는다.
👉 클래스형 컴포넌트와 함수형 컴포넌트의 차이점
-
👀 함수형 컴포넌트의 급부상
과거에는 클래스형 컴포넌트에서만 state를 사용할 수 있었고,
컴포넌트의 생성->업데이트->삭제 주기(생로병사)를 말하는 '라이프 사이클'도 클래스형에서만 사용할 수 있었다.
함수형에서는 단순한 컴포넌트만을 만들어 사용할 수 있었던 것이다. (클래스 컴포넌트의 심부름꾼 정도였다..)
하지만! 함수형 컴포넌트에 Hook 이라는 아이가 탄생하게 되면서
함수형에서도 state와 라이프 사이클을 사용할 수 있게 되었다.
(이로 인해 클래스형 컴포넌트보다 더 높은 자리를 차지하게 됐다!)
라이프 사이클을 이용할 수 있다면, 컴포넌트 변화 상황에 맞춰 그 때 그 때 우리가 원하는 타이밍에 원하는 행동을 넣어줄 수 있다는 것이다.
👀 Hook 사용법
function FuncComp(props){
// number라는 이름을 가지는 애를 setNumber라는 함수대로 변할 수 있게 할 것이라는 뜻이다.
// number라는 이름을 가지는 애와 setNumber의 시스템은 아래에서 우리가 만들어서 쓰면 된다.
// React.useState() <- 괄호 안에는 number가 가질 맨 처음 값(초기값)을 넣으면 된다.
const [number, setNumber] = React.useState(null);
return (
<div className="container">
<h2>function style component</h2>
<p>Number : {number}</p> //number를 여기에 넣어줬다.
<p>Date : {_date}</p>
<input type="button" value="random" onClick={
function(){
setNumber(Math.random());
}
}></input>
)
//버튼 onClick에 setNumber 함수로 랜덤한 숫자가 나오게하는 식을 넣었기 때문에
//버튼을 누를 때마다 number부분에 랜덤한 숫자가 나타난다.
👀 라이프사이클 ( 컴포넌트의 생로병사 )
🤜 클래스 컴포넌트에서의 라이프사이클
-
📍 componentWillMount()
컴포넌트에서 사용할 코드들을 가져다 두는 부분이다.
📍 render()
코드가 화면에 그려지는 부분이다. mount가 되는 부분이라고도 말한다.
📍 componentDidMount()
컴포넌트가 모두 실행된 상태를 말한다. 실행이 모두 끝난 후 처리할 일이 있다면 여기에 설정해둘 수 있다.
상위에 적어두었던 클래스 컴포넌트 생김새 예시에서 각 부분을 명시해보았다.
class ClassComp extends React.Component{
componentWillMount(){
//render 전에 준비해 둘 코드들이 있는 곳이다.
}
componentDidMount(){
//render가 모두 실행되고 (컴포넌트가 모두 실행되고) 실행되었으면 하는 부분들을 적는 곳이다.
}
render(){
//render가 되는 부분이다.
return (
<div className = "container">
<h2>class style component</h2>
<p>Number : {this.state.number}</p>
<p>Date : {this.state.date}</p>
<input type="button value="random" onClick={}></input>
)
}
}
컴포넌트를 만들어두었으니
컴포넌트가 사용 될 때마다 컴포넌트에 있는 state값이 변경될테고 그 때마다 render가 일어나게 된다.
📍 shouldComponentUpdate()
render가 꼭 일어나야하는지 여부를 결정해주는 곳이다.
📍 componentWillUpdate()
컴포넌트에 있는 state가 변경되면 실행된다.
📍 componentDidUpdate()
state 변경이 완료되면 실행된다.
class ClassComp extends React.Component{
componentWillMount(){
//render 전에 준비해 둘 코드들이 있는 곳이다.
}
componentDidMount(){
//render가 모두 실행되고 (컴포넌트가 모두 실행되고) 실행되었으면 하는 부분들을 적는 곳이다.
}
shouldComponentUpdate(nextProps, nextState){
// return true 라고 적으면 render가 실행된다.
return true;
}
render(){
//render가 되는 부분이다.
return (
<div className = "container">
<h2>class style component</h2>
<p>Number : {this.state.number}</p>
<p>Date : {this.state.date}</p>
<input type="button value="random" onClick={}></input>
)
}
}
🤜 함수형 컴포넌트에서의 라이프사이클
-
📍 React.useEffect()
컴포넌트가 실행 완료되고(render 완료되고) 그 후에 실행되었으면 하는 것을 넣어두는 곳이다.
클래스형 컴포넌트에서 componentDidMount() 와 componentDidupdate() 가 가졌던 효과를
함수형 컴포넌트에서는 useEffect()가 가지는 것이다.
더보기
📍 React.useEffect() 의 불필요한 실행 없애기
const [number, setNumber] = React.useState();
// 컴포넌트의 return 부분이 모두 뷰에 그려지는 작업이 끝나면
// 아래의 useEffect 안에 있는 내용이 실행된다.
// 콘솔에 hello라고 뜨고, 뷰에 있는 title number가 변경되도록 했다.
UseEffect(function(){
console.log("hello")
document.title = number;
})
만일 number state가 변경되지 않았는데도 컴포넌트가 실행된다는 이유로 useEffect 내용이 실행된다면??
불필요한 실행을 하는 것이다.
컴포넌트가 실행된다고 하더라도 number state가 변경될 때에만 useEffect가 실행되도록 하려면 아래와 같이 [ ] 안에 number를 넣어주면 된다.
[ ] 안에 들어가 있는 부분이 변경실행될 때에만 useEffect가 실행된다.
const [number, setNumber] = React.useState();
// 컴포넌트의 return 부분이 모두 뷰에 그려지는 작업이 끝나면
// 아래의 useEffect 안에 있는 내용이 실행된다.
// 콘솔에 hello라고 뜨고, 뷰에 있는 title number가 변경되도록 했다.
UseEffect(function(){
console.log("hello")
document.title = number;
}, [number]);
📍 컴포넌트가 맨 처음 실행될 때에만 React.useEffect() 을 실행시키기
React.useEffect()가 컴포넌트가 맨 처음 생성될 때 딱 한번만 실행되는 것이다.
const [number, setNumber] = React.useState();
// 컴포넌트의 return 부분이 모두 뷰에 그려지는 작업이 끝나면
// 아래의 useEffect 안에 있는 내용이 실행된다.
// 콘솔에 hello라고 뜨고, 뷰에 있는 title number가 변경되도록 했다.
UseEffect(function(){
console.log("hello")
document.title = number;
}, []);
//[]안에 아무것도 넣지 않으면 된다.
출처 - https://krystal-k.tistory.com/entry/React-%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-vs-%ED%95%A8%EC%88%98%ED%98%95#:~:text=%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95%EA%B3%BC%20%ED%95%A8%EC%88%98%ED%98%95%20%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98%20%EC%83%9D%EA%B9%80%EC%83%88%EB%A5%BC%20%EB%B9%84%EA%B5%90%ED%95%B4%EB%B3%B4%EB%A9%B4%20%EC%8B%A4%EC%A0%9C%20%EB%B7%B0%EC%97%90%20%EA%B7%B8%EB%A0%A4%EC%A7%80%EB%8A%94,%28%EC%83%9D%EB%A1%9C%EB%B3%91%EC%82%AC%29%EB%A5%BC%20%EB%A7%90%ED%95%98%EB%8A%94%20%27%EB%9D%BC%EC%9D%B4%ED%94%84%20%EC%82%AC%EC%9D%B4%ED%81%B4%27%EB%8F%84%20%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95%EC%97%90%EC%84%9C%EB%A7%8C%20%EC%82%AC%EC%9A%A9%ED%95%A0%20%EC%88%98%20%EC%9E%88%EC%97%88%EB%8B%A4.