[리액트, nextJS] state와 useSate 개념과 사용법

데이터를 관리하려면 state에 대해 알아야한다. 

state는 useState()

 

const [likes,setLikes] =useState(0)

0에서 시작한다. 그리고 리스트를 리턴한다. ( [likes,setLikes])

likes : state변수

setLikes : function to update it

 

function Likes() {
const [likes, setLikes] = useState(0)

const handleClick = () => {
setClicks(likes+1)
}


return(
<button onClick={handleClick}>
Likes: {likes}
</button>
)
};

 

 

Controlled 컴포넌트의 경우,

form에서 사용하려면 다음과 같이 쓴다. 

const [value,setValue] =useState('')

 

function ControlledInput() {
const [value,setvalue] =useState('')

return (
<input
value={value}
onChange={(e) => setValue(e.target.value)}
/>
)
}

 

 

작동원리는 다음과같다.