초보 개발자

이번엔 코인들의 정보를가져와서 보여주고 달러를 기준으로 얼만큼 살 수 있는지 확인할 수 있는 기능을 만들어 보려고한다. 이걸 만들기 위해 먼저 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..

react-router-dom을 활용해서 react에서 간단히 router를 만들어 줄 수 있다. 여러 종류가 있지만 우리는 gh-pages에 최적화된 HashRouter를 사용할 것이다. npm i react-route-dom App.js에서 아래와 같은 Route를 만들 것이다. / /home /about 각 url에 구분을 해주려고한다. /은 home으로 영화List를 보여주고 /about은 그냥 소개페이지이고 /movie/:id는 각 영화를 누르면 그 영화가 나오도록 해주었다. 여기서 /에는 exact={true}옵션을 주었는데 이것을 주지 않게되면 겹치는 URL전부다 component가 실행이 된다. 예를들어 '/'는 '/' + 'about'에도 들어가있기 때문에 /의 component가 abo..

전에 axios를 async await을 사용하여 비동기로 정보를 가져온 적이 있다. 이제 이 정보를 가지고 영화제목 및 정보를 나타내려고한다. 가져온 값을 콘솔에 찍어보면 objetct가 출력이 되는데 obj.data.data.movies안에 20개의 영화들이 들어있다. componentDidMount가 되면 이 정보들을 가져와서 setState를하는 함수를 만들어 집어 넣었다. 이로인해 App component의 state에는 20개의 movie가 들어있다. 그리고 정보를 받아오면 isLoading은 false로 바꿔주자. 각 movie에 많은 정보들이 담겨있지만 우리가 이번에 써볼것은 아래와 같다. 따라서 Movie.js에 Movie component를 만들어준다. 이번에는 class compone..

state는 보통 우리가 동적 데이터와 함께 작업할 때 만들어진다. 변하는 데이터, 존재하지 않는 데이터, 생기고 사라지고 변경되는 데이터.... 지금까지 해왔던 것은 function component이었다. 이제는 class component를 사용해 보려고 한다. function이 아니기 때문에 return이 없다. 대신 render를 써주면 된다. function component는 function이고 뭔가를 return한다 그리고 screen에 표시가 된다. class component는 class이다. 하지만 react component로부터 기능을 상속받아 screen에 표시가 된다. 그걸 render method안에 넣어야한다. react는 자동적으로 모든 class component의 re..