프로그래밍/React 2

React - useEffect의 사용법과 예제

useEffect 리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있습니다. useEffect(effect, [, deps]); 파라미터 effect함수 렌더링 이후 실행할 함수(리액트는 이 함수를 기억 했다가 DOM 업데이트 후 불러낸다.) effect함수에서 함수를 return 할 경우 그 함수가 컴포넌트가 Unmount 될 때 정리의 개념으로 한 번 실행된다. deps 특정한 값이 변경될 때 effect함수를 실행 하고 싶을 경우 배열안에 그 값을 넣어준다. 예 ) name변수가 변경 될 때 useEffect(effect, [name]) 빈 배열을 입력할 경우 컴포넌트가 Mount 될 때에만 실행 된다. componentDidMount 혹은 compon..

React - useState hook의 사용법과 예제

Hook이란 기존의 React에서는 클래스 컴포넌트를 작성해야만 상태(state) 값 관리 및 여러 React의 기능등을 사용할 수 있었지만 , React 16.8버전부터 추가된 Hook을 이용하면 함수 컴포넌트에서도 상태관리등이 사용가능 하도록 되었습니다. 그렇다고 해서 클래스 컴포넌트가 필요 없는 것은 아니며, 상황에 따라 적절히 맞춰 사용 가능합니다. useState Hook 기본적으로 배열 비구조화 할당문법으로 많이 사용 됩니다. [state, setState] = useState(initialState); 파라미터 initialState state의 초기값 설정 반환값 array (pair of values) 이 배열은 아래와 같은 2개의 값을 가지고 있습니다. 현재의 상태 값(state) 상태..