reactjs

[React] github pages에 배포하기 (Publishing)

Intro CRA로 만들 페이지를 github pages에 deploy하기 Github Pages GitHub Pages는 GitHub 에서 제공하는 무료 서비스인데, html, css, javascript를 올리면 그걸 웹사이트로 만들어서 전세계에 배포해주는 무료 서비스이다. 1. gh-pages 설치 GitHub Pages에 배포하기 위해서는 gh-pages 툴을 설치한다. gh-pages는 결과물을 GitHub Pages에 업로드 할 수 있게 해주는 패키지이다. npm i gh-pages 2. build 실행 package.json에는 build script가 있는데, 이 script를 실행하면 우리 웹사이트의 production ready code를 생성하게 된다. (* production rea..

[React] API 사용하기

Intro React에서 영화 API 데이터를 가져와서 컴포넌트에 보여주기 API 에서 가져온 데이터는 JSON 형식이라, 배열 State를 사용하게 된다. 이는 이전 포스팅 설명했으니 참고하자. [React] 배열 State Intro 간단한 ToDo-list 어플 배열 State에 새로운 값 추가하기 배열 State값을 component로 render하기 State 연습을 위해 할 일을 추가할 수 있는 간단한 투두리스트 어플을 만들어보려고 한다. State의 기본 hu-coding.tistory.com API 에서 데이터 받아오기 먼저, 영화 API 주소를 이용해 데이터를 가져오려고 한다. https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_b..

[React] 배열 State

Intro 간단한 ToDo-list 어플 배열 State에 새로운 값 추가하기 배열 State값을 component로 render하기 State 연습을 위해 할 일을 추가할 수 있는 간단한 투두리스트 어플을 만들어보려고 한다. State의 기본적인 내용은 이전 포스팅에 정리해놓았다. [React] State Intro 버튼을 몇 번 클릭했는지 세는 어플 React.js의 state 컴포넌트에 state 추가 state 변경 시 UI 리렌더링 state란? 기본으로 데이터가 저장되는 곳. 이 어플에서는 버튼을 몇 번 클릭했는지 세는 counter hu-coding.tistory.com 배열 State 할 일(toDo)를 여러개 저장하기 위해 배열 State인 toDos를 정의한다. const [toDo, ..

[React] Effects (useEffect, clean-up)

Intro useEffect Clean-up 예를 들어, 우리가 검색 api를 사용하려고 할 때 맨 처음 api를 호출해 데이터를 받아온다. 하지만 이후에 버튼을 클릭하든.. 어떤다 state가 변경될때마다 다시 그 api를 또 호출한다면? 매우 비효율적이다. 그래서 우리는 가끔은 특정 코드들이 처음 한번만. 즉 첫번째 컴포넌트의 render에만 실행되도록 하고 나중에 state가 변하더라도 그 코드들을 다시 실행되지 않도록 하고 싶다. useEffect function React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행할지를 알려주는데, 아래의 예시처럼 특정 코드들을 특정한 때에만 실행되도록 하고 싶을때 사용할 수 있다. useEffect 함수는 두 개의 인자(argument)를 가지고 있다. us..

[React] Props (Memo, Props Types)

Intro 두 개의 같은 디자인의 버튼을 만듬 Props Memo Props Types Props 일종의 방식. 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 보낼 수 있게 해주는 방법 text가 다른 여러 button에 같은 style을 주고 싶을 때, 버튼 컴포넌트마다 style을 복사하는 건 비효율적이다. 따라서 style의 설정들을 넘겨줄 수 있는 button 컴포넌트를 하나 만들어서 재사용하는것이 좋다. button 함수형 컴포넌트를 하나만들었다. 여기에 버튼마다 다른 text를 주려면 어떻게해야할까? 바로 여기서 사용하는 것이 Props이다. 커스텀 컴포넌트에 데이터를 전달시키기 위해 구문(syntax)를 이용한다. img 태그의 src="" 라던지, button에 EventListner을 붙여..