728x90 반응형 리액트3 [React] 리액트 이해하고 사용하기 (3) useEffect useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) .then((json) => { setCoins(json) setLoading(false) }) }, []) useState는 값이 변화할 때마다 매번 실행되지만 useEffect는 단 한 번만 실행된다. 즉, 우리가 언제 코드를 실행시킬지 결정할 수 있다는 것이다. useEffect으로 우리는 아래와 같이 언제 코드를 실행시킬지 결정할 수 있다. 1. 처음부터 실행시키기 2. 특정 조건일때 실행시키기 알고보니 useEffect를 이러한 특성을 이용해 서버와 통신하여 데이터를 주고 받을 수 있다. 특정 조건일 때 서버와 통.. 2022. 8. 16. [React] 리액트 이해하고 사용하기 (2) useState() 이용해서 리렌더링 하기 const root = document.getElementById("root"); let count = 0; function countUp() { count += 1; }; const Container = () => ( 클릭수 : {count} 클릭 ); ReactDOM.render(, root); JSX를 이용해서 간편하게 HTML를 render해줬다. 인제 우리가 원하는 것은 버튼을 클릭하면 클릭수가 0에서 클릭한 수만큼 바뀌는 것이다. 버튼을 클릭하면 countUp이라는 함수가 동작하고 함수로 인해 count는 1씩 증가할 것이다. 그렇지만 실제로는 UI에서는 아무런 일도 일어나지 않는다❗️ 왜그럴까? 바로 리렌더링이 되지 않기 때문이다. 코드가 동작하는 것을 보면 리렌더링 즉 새로고침이 되지 않는.. 2022. 7. 30. [React] 리액트 이해하고 사용하기 (1) JSX JSX를 모르고 리액트를 이해할 수는 없다. 리액트 공식문서에서도 맨 먼저 소개되는 개념이 JSX일 정도로 중요하다. 공식문서를 보는 것도 추천하기 때문에 아래 링크를 참고하시길. https://ko.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org 클릭수 : 0 클릭! 순수 JS에서는 body에 HTML을 만들어준 다음 에서 기능이 동작하게 해줬다. 하지만 기능이 동작하게 하기 위해서는 document.getElementById라든지 document.querySelector라든지 HTML을 가지고 와야했다. 이 비효율적인 방식을 바꿔주는 것이 .. 2022. 7. 30. 이전 1 다음 728x90 반응형
