NOW OR NEVER

리액트 Router 리액트 라우터 라이브러리 Single Page Application(SPA) 라우팅을 클라이언트가 담당 단점 앱의 규모가 커지면 JS 파일의 크기가 너무 커질 수 있다.(해결책 : Code Splitting) 브라우저에서 자바스크립트가 구동되지 않으면 UI를 볼 수 없다.(해결책 : Server Side Rendering) ex) 검색엔진에서 크롤링 불가능 라우팅 : 어떤 주소에 어떤 UI를 보여줄지 규칙을 정하는 작업 리액트 라우터는 컴포넌트를 기반으로 라우팅을 한다. react-router-dom 설치 주요 컴포넌트 BrowserRouter : HTML5 History API 사용, 주소만 바꾸고 페이지는 다시 불러오지 않음, 가장 많이 사용 HashRouter : 옛날에 사용 하..

리액트 API 연동 redux는 API 연동 필수적인 요소가 아니다. API 연동 기본 npx create-react-app > yarn add axios axios 라이브러리 : rest api를 요청하게 될 때 프로미스 기반으로 처리할 수 있게 해주는 라이브러리(rest api 쉽게 요청 가능) import axios from ‘axios’; 요청 방법 : axios.HTTP메서드(요청 api 주소와 (정보)) ; rest api : 클라이언트와 서버가 소통하는 방식 중 하나(HTTP 메서드(GET, POST, PUT, DELETE)를 통해 구분) HTTP 메서드 : GET(데이터 조회), POST(데이터 등록), PUT(데이터 수정), DELETE(데이터 제거) 컴포넌트에서 api 요청하는 방법 a..

리액트 컴포넌트 스타일링 Styled-components Styled-components 라이브러리는 CSS in JS(자바스크립트 안에 CSS 작성)와 관련된 것이다. CSS in JS 라이브러리 중 가장 인기 많음, emotion도 유명함 Tagged Template Literal 문법 속성을 활용해서 구현이 되어 있다. 설치 : yarn add styled-components style 적용하고자 하는 파일 상단에 import styled from "styled-components"; 작성 확장 프로그램 vs code-styled-components 설치시 색상 지원, 자동완성지원 사용 시 ${props => props.컴포넌트props이름 && csswidth : 10rem; height : 10..

리액트 컴포넌트 스타일링 Sass 문법적으로 짱 멋진 스타일 시트 스타일시트의 재사용성, 코드 가독성 높여줌 반복되는 코드는 @mixin 활용 사용시 props 이름만 설정시 true 값을 갖는 것과 동일 라이브러리 설치 yarn add node-sass로 node-sass 라이브러리 설치(프로젝트에서 sass 사용 가능해짐, sass로 작성된 코드로 css로 변환해주는 역할) classnames 라이브러리 : 조건부로 class name 적용시 굉장히 쉽게 가능, yarn add classnames 문자열, 객체, 배열 등을 사용해서 다양한 옵션으로 조합해 classname으로 생성 가능 falsy한 값(false, null, 0, undefined) 무시 사용 : 사용하려는 파일 상단에 import ..

리액트 입문 class 형 컴포넌트 기존 컴포넌트는 함수형으로 만들었었다. 클래스 컴포넌트는 또 하나의 컴포넌트 선언방식 클래스 컴포넌트는 요즘 자주 사용하지는 않음 클래스 컴포넌트 유지 보수 하거나 함수형 컴포넌트로 해결하지 못하는 부분이 두개 정도 있기 때문에 익히기 앞으로 컴포넌트는 함수형으로 만드는 것이 좋고 클래스 컴포넌트는 꼭 필요할 때 혹은 옛날 컴포넌트를 유지 보수 하는 경우에만 사용 hooks라는 게 생기면서 클래스 컴포넌트는 뒷전이 됨 만드는 방법 상단에 Component 불러오기 : import React, {Component} from ‘react’; class 키워드로 컴포넌트 만들기 : class 컴포넌트이름 extends Component { } class 형 컴포넌트는 ren..

리액트 입문 Hook 함수 useReducer 이전에는 컴포넌트 상태 업데이트 시 useState를 사용해서 새로운 상태를 설정해주었는데 useState말고도 useReducer를 가지고도 상태를 업데이트를 해줄 수 있다. useState와 차이 : useState는 설정하고 싶은 다음 상태를 직접 지정해주는 방식으로 상태를 업데이트하는 반면에 useReducer은 action이라는 객체를 기반으로 상태를 업데이트 한다. useReducer 함수 사용시 컴포넌트 상태 업데이트 로직을 컴포넌트 밖으로 분리시킬 수 있다. 심지어 다른 파일에 작성 후 불러와서 사용도 가능 action : 업데이트할 때 참조하는 객체 type: 어떤 업데이트를 진행할 것인지 명시할 수 있다. 이름 직접 설정 가능 diff : ..

리액트 입문 리액트가 만들어진 이유 Javascript를 사용한 DOM 변형 DOM : 각 html element 정보를 지니고 있는 JS 객체 Ember, Backbone, AngularJS 등의 프레임워크는 작동방식이 다르지만 자바스크립트 특정 값이 바뀌면 특정 DOM 속성도 바뀌어서 업데이트 하는 작업을 간소화해주는 방식으로 웹개발의 어려움을 해결해줌 리액트는 어떠한 상태가 바뀌었을 때 DOM을 어떻게 바꿀지 규칙을 정하는 것이 아니라 아예 다 날려버리고 처음부터 모든 걸 새로 만들어 보여주면 어떨까라는 아이디어에서 시작된 라이브러리이다. 그러면 업데이트를 어떻게 해야할 지를 전혀 고민할 필요가 없어지기 때문에 개발이 정말 쉬워질 것이다. 리액트는 Virtual DOM을 사용해 성능은 유지하되 업데..