useEffect 3

React.useEffect 와 Promise

Promise 는 자바스크립트에서는 없어서는 안될 덕목? 이다. Promise 없는 자바스크립트는 상상할수없어이제......ㅠㅠ React.useEffect 안에서는 await 을 쓸수없다. 만약당신이 await 을 썼다면 리액트가 바로 당신을 혼줄 내줄것이야 - 는 개소리고 콘솔에 경고문을 보게된다. React.useEffect(async () => { // 이렇게 쓰면 안되고 const result = await axios( 'https://something.com/api', ); setData(result.data); }, []); 그렇다면 어떻게 사용해야 할까? promise 부분을 별도의 함수로 만들어서 호출한다. React.useEffect(() => { fetchData(); }, []); ..

Note/ReactJS 2020.08.04

React - setTimeout function 에서 state 접근

Function 컴포넌트에서 useState 를 사용하고있고, setTimeout 함수안에서 특정 state 값을 체크해야 하는 상황인데, 이상하게도 분명히 setTimeout 함수가 실행되기 전 state 를 변경해주었는데도 setTimeout 호출 함수는 setTimeout 세팅 시점의 값을 가져오고 있었다. const [status, setStatus] = React.useState('ready'); function onClick() { setTimeout(() => { console.log('after timeout: ', status); }, 1000); setStatus('started'); } console.log('rendering :', status); return Click; 나의 경우..

Note/ReactJS 2020.08.04

React Hooks 이용하기

https://reactjs.org/docs/hooks-intro.html Introducing Hooks – React A JavaScript library for building user interfaces reactjs.org Hooks 는 리액트의 function 컴포넌트에서 사용할 수 있다. 간단히 사용방법을 알아보자. React.useState class 컴포넌트에서 사용하는 state 와 setState 대신 사용하는 것은 React.useState 이다. 간단한 사용방법을 알아보자. const [count, setCount] = React.useState(0); useState() 괄호안에 들어가는 값은 디폴드 값이다. 위의 예제는 count 값으로 0 을 기본 세팅하고 count 값을 수..

Note/ReactJS 2020.08.04