state가 변화될때 component는 재렌더링이 되고 모든 코드들이 재실행도 된다
이때 api 호출 등 재렌더링이 되지않아야할 때가있다
App.js
import styled from './App.module.css';
import { useState } from 'react';
function App() {
const [counter, setCounter] = useState(0);
console.log('render');
const onClick = () => {
setCounter((prev) => prev + 1);
};
return (
<div>
<h1 className={styled.title}>{counter}</h1>
<button onClick={onClick}> Click</button>
</div>
);
}
export default App;
컴포넌트가 렌더링 될때 console.log('render'); 가 실행되며 로그가 찍힌다.
++
로그가 2번 찍히는 이유는
index.js에 React.StrictMode 태그에 감싸져 있어서 그렇다고 한다.
StrictMode는 create-react-app로 설치했을 때 기본적으로 생성되는 태그로,
해당 테그로 감싸져 있는 경우 자손까지 검사한다해서 두 번 실행된다고 합니다.
(노마드코더 댓글에서 참고)
React 공식문서
App.js
import styled from './App.module.css';
import { useEffect, useState } from 'react';
function App() {
const [counter, setCounter] = useState(0);
const onClick = () => setCounter((prev) => prev + 1);
console.log('i run all the time.');
useEffect(() => {
console.log("call the api..") // 한번만 실행된다
}, []);
return (
<div>
<h1 className={styled.title}>{counter}</h1>
<button onClick={onClick}> Click</button>
</div>
);
}
export default App;
#0 에서 언급된 컴포넌트가 재렌더링이 되더라도 한번만 실행할수 있게 도와주는것이
useEffect 이다
useEffect는 화면을 그리고 실행되는데 라이플 사이클과 관련이 있는것 같지만 이 챕터에서는 나오지않았다. 따로 찾아봐야징
import styled from './App.module.css';
import { useEffect, useState } from 'react';
function App() {
const [counter, setCounter] = useState(0);
const [keyword, setKetword] = useState('');
const onClick = () => setCounter((prev) => prev + 1);
const onChange = (event) => setKetword(event.target.value);
useEffect(() => {
console.log('i run only once'); // 한번만 실행된다
}, []);
useEffect(() => {
if (keyword !== '' && keyword.length > 5) {
console.log('I run when keyword', keyword);
}
}, [keyword]); // watch 기능 처럼 keyword의 변화만 감지하여 렌더링이 이뤄지더라도 변화된값이 없으면 실행되지않는다.
useEffect(() => {
console.log('I run when counter', counter);
}, [counter]); // watch 기능 처럼 counter의 변화만 감지하여 렌더링이 이뤄지더라도 변화된값이 없으면 실행되지않는다.
useEffect(() => {
console.log('I run when keyword & counter', counter, keyword);
}, [keyword,counter]); // keyword,counter 둘 중 하나만 변화되도 실행한다
return (
<div>
<input
type='text'
placeholder='Search here..'
onChange={onChange}
value={keyword}
></input>
<h1 className={styled.title}>{counter}</h1>
<button onClick={onClick}> Click</button>
</div>
);
}
export default App;
useEffect 2개의 인자를 가지는 함수이다.
첫번재는 우리가 실행시키고 싶은코드,
두번째는 dependencies이다, 이때 dependencies란 react.js 가 지켜보아야 하는것을 의미하며 그것들이 변화할때 React.js가 코드를 실행시킨다
import styled from './App.module.css';
import { useEffect, useState } from 'react';
function Hello() {
useEffect(function () {
console.log('hi');
return function () {
console.log('bye');
};
}, []);
useEffect(() => {
console.log('hi');
return () => { // 라이프 사이클 Destroyed -> 컴포넌트가 사라질때 실행된다.
console.log('bye');
};
}, []);
return <h1>Hello</h1>;
}
function App() {
const [showing, setShowing] = useState(false);
const onClick = () => setShowing((prev) => !prev);
return (
<div>
{showing ? <Hello /> : null}
<button onClick={onClick}>{showing ? 'Hide' : 'Show'}</button>
</div>
);
}
export default App;