import Button from"./Button";
import styles from "./App.module.css"
import {useState} from "react";
function App() {
const [counter, setValue] = useState(0);
const onClick = () => setValue((prev) => prev+1);
return (
<div>
<h1> {counter}</h1>
<button onClick={onClick}>click me</button>
</div>
);
}
export default App;
state 사용 후
value 받아오고, value 수정을 위해 function을 받아옴.
previous state를 받아 +1 한 값을 return하는 function 생성한 후에 그 값을 h1을 통해 보여줌
그리고 button 태그에 onClick 사용, state를 modify할 수 있는 버튼 생성
state가 변화할 때 모든 component는 다시 실행되고 모든 코드가 재 실행.
업데이트된 값을 볼 수 있는 이유이기도 함.
// 그렇다면 첫번째로 render할 때만 코드를 실행하려면?
// 즉, 다른 state 변화에는 실행되지 않도록 하는 것. how?
만약 api 사용 시, 첫번째 component render에서 api call하고 이후에 state 변화한 후
api에서 데이터를 또 가져오고 싶진 않을 것임. 불필요함.
그렇다면 어떻게 특정 코드들이 첫번째 component render에만 실행되게 하는가?
-> useEffect
import Button from"./Button";
import styles from "./App.module.css"
import {useState, useEffect} from "react";
function App() {
const [counter, setValue] = useState(0);
const onClick = () => setValue((prev) => prev+1);
console.log("run all the time");
useEffect( ()=> {
console.log("CALL THE API");
}, []);
return (
<div>
<h1> {counter}</h1>
<button onClick={onClick}>click me</button>
</div>
);
}
export default App;
Deps
// input에 이벤트 리스너로 들어가는 function
//onChange function이 작돌할 때 argument로 event 받음
//이후 event를 발생시킨 input에서 value를 받아서 그 value를 keyword state에 넣음
//그리고 그 keyword를 가져와 input의 value로 사용
//원할 때 input 조작 가능
타이핑 할 때마다 state modify
여기서 우리가 useEffect를 사용해야 하는 이유를 다시한번 알 수 있다.
만약 사용자가 글자 입력할 때마다 api를 새로 호출하는 것은 너무나도 불필요한 작업.
따라서 useEffect를 사용해야 한다.
코드의 특정 부분만이 변화했을 때, 원하는 코드만 실행시키는 방법
useEffect 두개의 컴포넌트 가짐
첫번째: 우리가 딱 한번만 실행하고 싶은 코드
두번째: 변화 대상
import Button from"./Button";
import styles from "./App.module.css"
import {useState, useEffect} from "react";
function App() {
// 첫번째 아이템: value, 두번째 아이템: 그 value를 modify하는 function
const [counter, setValue] = useState(0);
const [keyword, setKeyword] = useState("");
const onClick = () => setValue((prev) => prev+1);
// input에 이벤트 리스너로 들어가는 function
//onChange function이 작돌할 때 argument로 event 받음
//이후 event를 발생시킨 input에서 value를 받아서 그 value를 keyword state에 넣음
//그리고 그 keyword를 가져와 input의 value로 사용
//원할 때 input 조작 가능
const onChange= (event) => setKeyword(event.target.value);
useEffect( ()=> {
console.log("run only once");
}, []);
// 키워드가 있을 때만 검색하게 하고 싶다면?
useEffect(()=> {
console.log("run when 'keyword' changes");
}, [keyword]);
//keyword가 변화할 때 코드 실행할 것을 react.js에게 알려주는 것
useEffect(()=> {
console.log("run when 'counter' changes");
}, [counter]);
useEffect(()=> {
console.log("run when 'counter' & 'keyword' changes");
}, [counter]);
return (
<div>
<input
value={keyword}
onChange={onChange}
type="text"
placeholder="Search here..."/>
<h1> {counter}</h1>
<button onClick={onClick}>click me</button>
</div>
);
}
export default App;
*useState 여러번 사용하기
import { useState } from "react"
const Say = () => {
const [messeage, setMessage] = useState('');
const onClickEnter = () => setMessage('안녕하세요!');
const onClickLeave = () => setMessage('안녕히가세요!');
const [color, setColor] = useState('black');
return (
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1 style={{color}}> {messeage} </h1>
<button
style={{color : 'red'}}
onClick={() => setColor('red')}>
빨간색
</button>
<button style={{color : 'green'}} onClick={() => setColor('green')}>
초록색
</button>
<button style={{color : 'blue'}} onClick={() => setColor('blue')}>
파란색
</button>
</div>
);
};
export default Say;
'FE > React & TS' 카테고리의 다른 글
[REACT] Event (0) | 2023.05.09 |
---|---|
[REACT] map / key (0) | 2023.05.09 |
[REACT] create-react-app (0) | 2023.05.08 |
[REACT] propTypes (0) | 2023.05.08 |
[REACT] JSX / setState / converter (0) | 2023.02.15 |