<div id="readability-page-1" class="page"><div><h2 id="웹-게임을-만들며-배우는-react-4강-5강">웹 게임을 만들며 배우는 React 4강, 5강</h2>
강의 내용을 정리한 포스팅입니다.
<h2 id="반응-속도-체크">😈반응 속도 체크</h2>
<h2 id="react-조건문">React 조건문</h2>
<ul>
<li>
react에서의 조건문은 <code>**삼항연산자**</code>를 많이 사용한다.
jsx에서 false, undefined, null은 태그 없음을 의미한다.
</li>
</ul>
<h3 id="ref의-사용">Ref의 사용</h3>
<ul>
<li>
hooks에서는 <code>this</code>의 속성을 Ref로 대체하여 사용한다.
<pre><code>import React, { useState, useRef } from 'react';

const ResponseCheckHooks = () =&gt; {
 const [state, setState] = useState('waiting');
 const [message, setMessage] = useState('클릭해서 시작하세요');
 const [result, setResult] = useState([]);
 const timeOut = useRef(null);
 const startTime = useRef();
 const endTime = useRef();

 const onClickScreen = () =&gt; {
 if (state === 'waiting') {
 setState('ready');
 setMessage('초록색이 되면 클릭하세요')
 timeOut.current = setTimeout(() =&gt; {
 setState('now');
 setMessage('지금 클릭');
 startTime.current = new Date(); // state로 놓으면 렌더링이 되기 때문에 this로 선언한다.
 }, Math.floor(Math.random() * 1000) + 2000);
 } else if (state === 'ready') { // 성급하게 클릭
 clearTimeout(timeOut.current);
 setState('waiting');
 setMessage('너무 성급하시군요!, 초록색이 된 후에 클릭하세요');
 } else if (state === 'now') { // 반응속도 체크
 endTime.current = new Date();
 setState('waiting');
 setMessage('클릭해서 시작하세요');
 setResult((prevResult) =&gt; {
 return [...prevResult, endTime - startTime];
 });
 }
 }
}</code></pre>
</li>
</ul>
<blockquote>
useRef: 값이 바뀌기는 하지만 렌더링 즉 화면에는 영향을 미치고 싶지 않은 경우 사용
</blockquote>
<ul>
<li>
return 내부에 즉시실행 함수를 만들어서 if문과 for을 사용할수있다.
</li>
<li>
예시
</li>
</ul>
<pre><code>&lt;ul&gt;
	{(() =&gt; {
	const arr = [];
	for (let i = 0; i &lt; tries.length; i++) {
		arr.push()/...
	}
}()) // 즉시실행함수
&lt;/ul&gt;</code></pre>
<blockquote>
하지만 추천하는 방법은 아니다.
</blockquote>
<hr>
<h2 id="-리액트-라이프-사이클">📌 리액트 라이프 사이클</h2>
<h3 id="-componentdidmount">✅ componentDidMount</h3>
<ul>
<li>첫 렌더링이 성공적으로 실행이 됐다면, <code>componentDidMount</code>가 실행된다.</li>
<li>리렌더링이 된다면, <code>componentDidMount</code> 는 다시 실행되지 않는다.</li>
<li>componentDidMount을 통해 주로 비동기 요청을 많이 한다.</li>
</ul>
주의 
<code>비동기 함수</code>를 사용하는 경우, 밖에 있는 변수를 참조하면 클로저가 발생한다.
<h3 id="-componentwillunmount">✅ componentWillUnmount</h3>
<ul>
<li><code>componentDidMount</code>에서 실행 됐던 작업들을 제거하는 용도로 사용한다.</li>
<li>컴포넌트가 제거되기 직전에 실행된다.</li>
</ul>
<blockquote>
componentDidMount, componentWillUnmount 는 한 쌍으로 사용된다.
</blockquote>
<h3 id="-componentdidupdate">✅ componentDidUpdate</h3>
<ul>
<li>리렌더링 후에는 componentDidUpdate이 실행된다.</li>
</ul>
<h3 id="-클래스-라이프-사이클">✅ 클래스 라이프 사이클</h3>
클래스의 경우 -&gt; constructor -&gt; render -&gt; ref -&gt; componentDidMount -&gt;
(setState/props 바뀔때 -&gt; shouldComponentUpdate render -&gt; componentDidUpdate)
부모가 나를 없앴을 때 -&gt; componentWillUnmount -&gt; 소멸
<h2 id="-setinterval과-라이프-사이클-연동하기">📌 setInterval과 라이프 사이클 연동하기</h2>
<ul>
<li>
setInterval → clear를 하지 않으면 메모리 누수가 생기게 된다.
</li>
<li>
setTimeout → clear를 하지 않으면 메모리 누수가 생기게 된다.
<pre><code>class RSP extends Component {
 state = {
 result: '',
 imgCoord: rspCoords.바위,
 score: 0,
 };

 interval;

 componentDidMount() { // 컴포넌트가 첫 렌더링된 후, 여기에 비동기 요청을 많이 해요
 this.interval = setInterval(this.changeHand, 100);
 }

 componentWillUnmount() { // 컴포넌트가 제거되기 직전, 비동기 요청 정리를 많이 해요
 clearInterval(this.interval);
 }

 changeHand = () =&gt; {
 const {imgCoord} = this.state;
 if (imgCoord === rspCoords.바위) {
 this.setState({
 imgCoord: rspCoords.가위,
 });
 } else if (imgCoord === rspCoords.가위) {
 this.setState({
 imgCoord: rspCoords.보,
 });
 } else if (imgCoord === rspCoords.보) {
 this.setState({
 imgCoord: rspCoords.바위,
 });
 }
 };</code></pre>
</li>
</ul>
<h2 id="-hooks의-라이프-사이클">📌 Hooks의 라이프 사이클</h2>
<ul>
<li>hooks에는 라이프 사이클이 없다. 하지만 클래스의 라이프 사이클과 비슷하게 사용할 수 있는 개념이 있다.</li>
</ul>
<h3 id="-useeffect">✅ useEffect</h3>
<ul>
<li>useEffect가 componentDidMount, componentDidUpdate 역할을 대신 합니다. 하지만 1대 1 대응은 아닙니다.</li>
<li>함수 컴포넌트는 렌더링이 될때마다 작성한 함수가 실행하고 더불어 <code>useEffect</code>가 실행한다.</li>
</ul>
<blockquote>
class의 경우 componentDidMount나 componentDidUpdate에서 모든 state를 조건문으로 분기 처리한다.
</blockquote>
<blockquote>
배열에는 꼭 useEffect를 다시 실행할 값만 삽입한다.
</blockquote></div></div>

TheJang story

웹 게임을 만들며 배우는 React 4강, 5강
강의 내용을 정리한 포스팅입니다.
😈반응 속도 체크
React 조건문
react에서의 조건문은 **삼항연산자**를 많이 사용한다.
 jsx에서 false, undefined, null은 태그 없음을 의미한다.
Ref의 사용
hooks에서는 this의 속성을 Ref로 대체하여 사용한다.
 import React, { useState, useRef } from 'react';
 const ResponseCheckHooks = () => {
 const [state, setState] = useState('waiting');
 const [message, setMessage] = useState('클릭해서 시작하세요');
 const [result, setResult] = useState([]);
 const timeOut = useRef(null);
 const startTime = useRef();
 const endTime = useRef();
 const onClickScreen = () => {
 if (state === 'waiting') {
 setState('ready');
 setMessage('초록색이 되면 클릭하세요')
 timeOut.current = setTimeout(() => {
 setState('now');
 setMessage('지금 클릭');
 startTime.current = new Date(); // state로 놓으면 렌더링이 되기 때문에 this로 선언한다.
 }, Math.floor(Math.random() * 1000) + 2000);
 } else if (state === 'ready') { // 성급하게 클릭
 clearTimeout(timeOut.current);
 setState('waiting');
 setMessage('너무 성급하시군요!, 초록색이 된 후에 클릭하세요');
 } else if (state === 'now') { // 반응속도 체크
 endTime.current = new Date();
 setState('waiting');
 setMessage('클릭해서 시작하세요');
 setResult((prevResult) => {
 return [...prevResult, endTime - startTime];
 });
 }
 }
 }
useRef: 값이 바뀌기는 하지만 렌더링 즉 화면에는 영향을 미치고 싶지 않은 경우 사용
return 내부에 즉시실행 함수를 만들어서 if문과 for을 사용할수있다.
예시
<ul>
 {(() => {
 const arr = [];
 for (let i = 0; i < tries.length; i++) {
 arr.push()/...
 }
}()) // 즉시실행함수
</ul>
하지만 추천하는 방법은 아니다.
📌 리액트 라이프 사이클
✅ componentDidMount
첫 렌더링이 성공적으로 실행이 됐다면, componentDidMount가 실행된다.
리렌더링이 된다면, componentDidMount 는 다시 실행되지 않는다.
componentDidMount을 통해 주로 비동기 요청을 많이 한다.
주의
비동기 함수를 사용하는 경우, 밖에 있는 변수를 참조하면 클로저가 발생한다. 
✅ componentWillUnmount
componentDidMount에서 실행 됐던 작업들을 제거하는 용도로 사용한다.
컴포넌트가 제거되기 직전에 실행된다.
componentDidMount, componentWillUnmount 는 한 쌍으로 사용된다.
✅ componentDidUpdate
리렌더링 후에는 componentDidUpdate이 실행된다.
✅ 클래스 라이프 사이클
클래스의 경우 -> constructor -> render -> ref -> componentDidMount ->
(setState/props 바뀔때 -> shouldComponentUpdate render -> componentDidUpdate)
부모가 나를 없앴을 때 -> componentWillUnmount -> 소멸
📌 setInterval과 라이프 사이클 연동하기
setInterval → clear를 하지 않으면 메모리 누수가 생기게 된다.
setTimeout → clear를 하지 않으면 메모리 누수가 생기게 된다.
 class RSP extends Component {
 state = {
 result: '',
 imgCoord: rspCoords.바위,
 score: 0,
 };
 interval;
 componentDidMount() { // 컴포넌트가 첫 렌더링된 후, 여기에 비동기 요청을 많이 해요
 this.interval = setInterval(this.changeHand, 100);
 }
 componentWillUnmount() { // 컴포넌트가 제거되기 직전, 비동기 요청 정리를 많이 해요
 clearInterval(this.interval);
 }
 changeHand = () => {
 const {imgCoord} = this.state;
 if (imgCoord === rspCoords.바위) {
 this.setState({
 imgCoord: rspCoords.가위,
 });
 } else if (imgCoord === rspCoords.가위) {
 this.setState({
 imgCoord: rspCoords.보,
 });
 } else if (imgCoord === rspCoords.보) {
 this.setState({
 imgCoord: rspCoords.바위,
 });
 }
 };
📌 Hooks의 라이프 사이클
hooks에는 라이프 사이클이 없다. 하지만 클래스의 라이프 사이클과 비슷하게 사용할 수 있는 개념이 있다.
✅ useEffect
useEffect가 componentDidMount, componentDidUpdate 역할을 대신 합니다. 하지만 1대 1 대응은 아닙니다.
함수 컴포넌트는 렌더링이 될때마다 작성한 함수가 실행하고 더불어 useEffect가 실행한다.
class의 경우 componentDidMount나 componentDidUpdate에서 모든 state를 조건문으로 분기 처리한다.
배열에는 꼭 useEffect를 다시 실행할 값만 삽입한다.

[React] 클래스 컴포넌트의 라이프사이클과 Hooks에서의 라이프 사이클

댓글