WEB/React

[React] 'React' must be in scope when using JSX error 오류해결

CRA 를 실행시키니 에러가 떴다. 'React' must be in scope when using JSX error 해결법 React를 임포트 시켜준다. import React from 'react'; JSX는 자바스크립트 문법의 확장으로 ECMA 표준이 아니다. 따라서 create-react-app따라서 JSX를 사용할 때마다 표준 JavaScript로 변환하려면 바벨과 같은 툴이 필요하다. 바벨이 JSX가 사용되었음을 알고 이를 변환하도록 하기 위해서는 React를 임포트해주어야 한다. 참고 https://stackoverflow.com/questions/56562685/react-must-be-in-scope-when-using-jsx-error-in-routes-js-file 'React' mu..

[React] CSS Module - Component에 style 주기

앞서 포스팅한 create-react-app을 통해서, 특정 컴포넌트를 위한 css 파일을 만들 수 있는 기능을 사용할 수 있다. 먼저 css를 사용하는 방법에는 두 가지 선택지가 있는데 아래와 같다. 하나의 style 파일 만들기 component 마다 style 파일 만들기 1. styles.css 파일 styles.css 파일을 만들어 사용하는 것은 간단하다. css 파일에 넣고싶은 css코드를 작성하고, index.js에서 styel.css파일을 import를 해주면 된다. index.js import "./styles.css"; 하지만 이 방법은 css파일이 적용하려는 파일의 모든 부분에 import 된다는 단점이 있다. 2. component 마다 style 파일 만들어주기 - CSS Modu..

[React] 리액트 시작하기, create-react-app

Create React App Create React App은 React 배우기에 간편한 환경이며, 시작하기에 최고의 방법은 새로운 싱글 페이지 애플리케이션 입니다. 개발 환경을 설정하고, 최신 JavaScript를 사용하게 해주며, 좋은 개발 경험과 프로덕션 앱 최적화를 해준다. 1. Node.js 설치 및 npx 설치 가장 먼저 Node 14.0.0 혹은 상위 버전 및 npm 5.6 혹은 상위 버전이 필요하다. 설치 후 콘솔창에 node js의 버전을 확인해보는 명령어는 다음과 같다. node -v 그 후 npx 가 설치되어있는지 버전이나 커맨드 실행을 확인해본다. npm install npx -g // npx 설치 npx -v // 버전확인 npx // npx 커맨드 실행 2. 새로운 프로젝트 만들..

[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] React Router 사용하기

Intro React Router 사용 Router끼리 이동 1. React Router 사용하기 우리는 라우터 라이브러리를 사용하기위해 설치가 필요하다. npm install react-router-dom 물론 이 전에 CRA(creat-react-app)을 해주었다는 가정을 한 상태이다. 아무튼 우리는 원래 App 컴포넌트에 만들었던 모든 로직을 별개의 장소(Home)로 옮기고, App.js에는 react-route-dom의 컴포넌트(Router, Routes, Route)를 가져다 쓸 것이다. 그리고 이 컴포넌트들은 url을 바라보고 있으며, url이 바뀌면 어떤 것을 보여줄 것인지 결정한다. 컴포넌트를 사용하기 위해서는 먼저 import를 해줘야한다. import { BrowserRouter as..

[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..