React - 기초 ( useState )

- ChangeName()

ChangeName()

JSX 부분에 name변수를 출력하는 h2 태그와 클릭 시 Mike와 Jane으로 이름을 변경해주는 함수를 만들어 주었다.

하지만 버튼 클릭시 이름이 바뀌지 않고, console.log를 통해 이름을 확인해 보면 변수가 계속해서 바뀌는 것을 확인할 수 있다. 이러한 경우를 해결하기 위해서 바닐라 JS에서는 document.getElementById("name").innerText = name; 구문을 통해

위 처럼 JSX의 이름 값이 바뀌는 것을 확인할 수 있다. 이러한 구문 없이 상태값을 자유자재로 바꾸기 위해서 React에서는 Hooks 를 제공한다. Hooks 란 컴포넌트를 함수형으로 작성하여 상태값을 컨트롤 할 수 있는 기능이다.

- UseState

useState

useState의 기본 형은 const [name,setName] = useState('변수'); 이고 임포트를 통해 사용한다.
setName을 통해서 name 변수의 상태값을 처리할 수 있다.
useState를 사용하면

useState

아래와 같이 클릭과 동시의 상태 값이 바뀌는 것을 확인할 수 있다.

강의 주소 : https://www.youtube.com/watch?v=05uFo_-SGXU&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-
깃허브 주소 : https://github.com/beombeom1119/react_word