자기계발 캠퍼스

useState를 배웠으니 useEffect라는 훅을 살펴보자. useState를 활용하면 setState를 계속해서 해주고 state 값을 계속해서 리-렌더링해주게 된다. 하지만 예를 들어 날씨나 교통상황과 같은 데이터를 받을 때 useState를 활용하면 setState가 실행될 때마다 계속해서 데이터를 받아와야하는 고생을 해야한다. 이를 방지하고자 하는 것이 바로 useEffect라는 훅이다. (리액트 공식 홈페이지 링크 걸어놓음) counter와 keyword의 두 개의 state를 활용하여 useEffect를 살펴보자. useEffect의 문법은 이렇다 useEffect(실행할 내용, 변수) 실행할 내용은 위와 같은 console.log나 어떤 함수의 내용이나 아무거나 상관없다. 뒤에 나오는 변..

Hook 이라 함은 저번에 살펴본 UseState를 활용하는 것입니다. https://selfdevelopcampus.tistory.com/entry/ReactHook-useState-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0 React(Hook) - useState 활용하기 오늘은 리액트 훅 useState를 살펴보겠습니다. (링크: 리액트 훅 공식문서) const [count, setCount] = useState(0) count라는 변수를 const로 선언을 해주고 초기값에 0을 부여했다는 의미입니다. setCount는 c.. selfdevelopcampus.tistory.com 이 Hook을 사용하여 Array에서 push 메소드와 똑같은 기능을 하는 걸 만들어보려 합니다...

오늘은 리액트 훅 useState를 살펴보겠습니다. (링크: 리액트 훅 공식문서) const [count, setCount] = useState(0) count라는 변수를 const로 선언을 해주고 초기값에 0을 부여했다는 의미입니다. setCount는 count 변수를 조작해주는 콜백함수(?) 같은 녀석입니다. 이렇게 increase와 decrease라는 함수에서 setCount를 조작하였습니다. increase 실행 -> count에 1을 추가해서 count 값을 set해준다. decrease 실행 -> count에 1을 빼서 count 값을 set해준다. 그리고 각 버튼 onClick시 함수를 실행하게 설정해놓으면 즉시 화면에 더하기 빼기 된 결과가 출력됩니다. 우리가 신경쓰지 않아도 1이 계속 추..