초보 개발자

이번엔 코인들의 정보를가져와서 보여주고 달러를 기준으로 얼만큼 살 수 있는지 확인할 수 있는 기능을 만들어 보려고한다. 이걸 만들기 위해 먼저 4가지 state를 만들었다. 내가 얼마나 살 수 있는지 확인할 수 있는 money state, 그리고 현재 검색한 coin state, coin data를 가지고 올 동안의 loading state, coin list를 담고있는 coins state https://api.coinpaprika.com/v1/tickers 위의 url을 사용하여 coin list를 불러오는 걸 useEffect안에 넣어주어서 한번만 실행이되도록 해주었다. async await을 사용하지 않으면 then을 사용하여 해주어야하는 번거로움이 있어서 async await을 사용해주었다. 그..

간단한 TO DO LIST를 만들어 보려고한다. 전에 vanilaJS로 만들어 본 적이 있었는데 일일이 eventListener를 넣어주거나 화면을 새로고침해주거나 하는식으로 하였는데 이젠 React의 setState()기능으로 좀 더 수월하게 진행할 수 있을 것 같다. 일단 전체적인 코드는 이러하다. 화면은 아래와 같다 먼저 ustState를 사용하여 List와 todo state를 만들어주었다. string인 todo를 array인 list안에 집어 넣고 그 list를 출력하려고 하기 때문이다. onChange는 input에 타이핑이 될 때마다 setTodo를하여 todo state를 업데이트 하는 것이다. 타이핑이 끝나면 이제 엔터를 치던 버튼을 누르면 전송을 해야하는데 이때 onSubmit을 사용..

component를 호출하면 component안에 있는 code들이 실행이된다. 그리고 그 안의 state가 변화하면 자연스럽게 그 code들이 다시 실행이 된다. 하지만 우리가 component안에 API를 이용해서 데이터를 받아온다던지 하는 경우에 state가 변화할 때 마다 계속 code가 실행이 되어 데이터를 불러올 필요는 없을 것이다. 다시말해서 component의 내부의 몇몇 코드들은 처음 딱 한번만 실행되고 다시는 실행되지 않도록 하고 싶을 것이다. 이럴 때 useEffect를 사용하는데 첫번째 argument는 우리가 딱 한번만 실행하고 싶은 코드가 들어온다. 두번째 argument는 마법같은친구이다. 두번째 인자는 일단 나중에 살펴보자 처음 component가 render될 때 저 두 c..

state는 기본적으로 data가 저장되는 공간이다. 일단 state에 대해 설명하기 전에 우리가 전에 만들었던 vanilaJS를 reactJS로 구현해보려고한다. counter라는 변수를만들고 click버튼을 누르면 숫자가 하나씩 증가하는 기능을 만들었다. 하지만 counter는 잘 늘어가긴하지만 아무도 UI를 새로고침해주지 않아 그대로이다. 처음에!!! 페이지가 로드 되었을 때 (counter = 0일때) render를 해주는게 전부이다. 그 이후 리렌더링을 하지않고있다. 그럼 단순히 onclick을 했을 때 rendering시켜주면 counter값이 변경될 것이다. 하지만 이게 최고의 방법도 아닐뿐더러 더 쉬운 방법이 존재한다. 이 방법은 우리가 값을 바꿀때마다 다시 렌더링하는걸 잊어서는 안된다. ..

react를 왜 배워야하는지 어떨 때 써야하는지에 대해서 모른다면 사용법을 무작정 외우는 수 밖에 없다. 이번에 간단하게 어떤 차이가 있는지 알아보고 가겠다. react element를 직접 만들어 보는 방식으로 원리를 이해하고, 어려운 방식으로 먼저해봐야 나중에 쉬운 방식으로 했을 때 편한지를 알 수 있었다. 먼저 비슷한 기능을 만들어보려고한다 VanilaJS 먼저 버튼을 클릭하면 화면의 숫자가 하나씩 증가하는 것을 나타내려고 하였다. 데이터가 바뀌어도 html은 새로고침이 되지 않는다. 따라서 화면에 그 숫자가 자동으로 반영되지 않는다. 이를 해결하기 위해서 eventlistener에 들어가는 함수에 그 표시하는 값을 바꿔주는 식을 적어주어야함. 그리고 많은 양의 코드가 필요 ( eventlisten..