react.js

전통적이 웹과 모바일 앱의 차이전통적으로 web application은 clien가 링크를 클릭하면 새로운 페이지가 로드되기를 기다려야했다. 이렇게 짜여진 코드는 리액트는 필요가 없고 JS만 필요하다.모든 페이지가 추가적인 로드필요없이 작동하며 아주 smooth한 경험

component란? 스타일을 만드는 Html 코드와 CSS코드와 어떠한 로직을 위한 JS의 결합이다. 우리는 이미 HTML, CSS, JS로 컴포넌트들을 만들 수 있다. 그런데 왜 리액트를 사용할까? 바로 조금 더 간단히 사용자 인터페이스를 구축할 수 있기 때문이다.

Create React App 우선 쉽게 찾아볼 수 있는 github주소이다. 또한 모든 문서가 궁금하다면 공식홈페이지에서 확인할 수 있다. 만약 github에서 파일을 clone하여 사용한다면 너는 일부 기본적인 리액트 코드 파일이 있는 미리 설정된 폴더들과 사용화할

src폴더에는 2가지의 js와 1가지의 css 파일이 있고 앞서 포스팅한것처럼 가장 중요한 것은 JS파일이다.만약 당신이 개발서버를 구동했다면 자동적으로 index.js 파일이 실행되고 이는 변형된 버전의 코드가 실행된다.npm 프로젝트 설정에서는 스크립트를 통해 코드

JSX는 Html의 XML이라고 할수 있다.현재 App.js에서는 function이라고 적혀있지만 Index.js에서는 자체 html요소처럼 쓰이는 component이다.그래서 해당 파일을 실행한 후 개발자 도구를 들어가보면 내가 작성하지 않은 코드들을 볼 수 있는데

프로젝트 구조 컴포넌트 폴더 src 폴더 및에 components라는 폴더를 만들어서 모든 컴포넌트들을 관리해준다. App.js 하지만 App.js는 넣지 않을것이다. 왜냐 이는 응용프로그램에서 역할에 관한것이기 때문이다. 무슨말이냐면 루트 컴포넌트가 된다는 것이다.

Props 앞서 포스팅했듯 리액트의 정수는 바로 component였다. 그리고 이 컴포넌트를 재사용하고, 분리하여 관리하는 것이 이 리액트 프레임워크에 장점이자 쓰는 이유였다. 그럼 이제 재사용할 수 있는 컴포넌트를 만들어보자. 자 만약 우리의 프로젝트가 위와같은 상

일반적인 js와 같이 onclick property로 작성해준다. 하지만 이는 JS가 아닌 JSX의 문법인것을 인지하여야 한다. (근데 참 아이러니한게 앞서 배웠을 땐 Html property에 onclick을 하면 js코드가 할 일을 Html에 부여하는것과 같아서 m

다중 state 해결 자 앞서 배운것을 토대로 1개의 component에 여러가지 state를 작성해보았다. 하지만 이건 5살 짱구가봐도 이상한 코드이다. 그래서 이 코드를 한개로 합쳐보겠다. 하지만 그전에 왜 useState() 함수가 input 값이 amount와

정답1\. Declarative JS code2\. React Project에서만 활병화되는 특수한 비표준 구문3\. 모든 UI는 결국 빌딩블록(=component)로 구성되며 사용가 인터페이스를 "컴포넌트의 조합"이라 생각할 수 있다.4\. 원하는 결과(UI등)를 정

JSX코드에서 동적인 구문을 실행하고 싶을 때 사용(JS 코드를 실행)사실 위와같은 코드는 하드코딩이다. 개수를 내가 임의로 지정했기 때문에 그래서 부모 컴포넌트로부터 내려온 배열을 받아서 사용하려면 밑에와 같이 { }를 이용하여 코드를 짜줘야한다.이전상태에 의존해서

위 사진과 같이 style property에 다양한 style을 객체로 담아서 보내준다. 이때 각 property마다 3항 연산자를 넣어 계산후 적용하도록 하였다.다만 항상 최우선 순위를 차지하기에 추후 복잡한 코드를 넣으면 본인이 원하는 결과가 안 나올 수 있다.th

chrome web store에서 무료로 설치 가능설치 후 dev tool에서 확인 가능22-12-31 기준현재 2개의 react 전용 tab이 있다.해당 tag에서는 react component와 UI의 아웃풋을 책임지는 컴포넌트의 구조를 확인할 수 있다.props도

JSX는 요소가 한 요소에 의해 wrapping 되어있어야 한다.왜? JS라는 언어의 태생적 한계 때문이다.즉, "root" JSX 요소에는 1개만 return하거나 저장되어야하며, 다만 여러 children 요소를 가질 수 있기에 하나에 담아서 보내는 것이다. 하지만

먼저 Font Awesome의 SVG 기반 아이콘을 활성화 시키기 위한 기본 패키지@fortawesome/fontawesome-svg-core를 설치함.그 다음 Font Awesome 아이콘 대한 패키지를 설치.이때 여러가지 package가 있지만 우리는 무료인 Sol

그동안 우리가 배웠던 것은 state나 이벤트등을 화면에 뿌려주는 것이었다.예를들어 JSX코드와 DOM을 평가하고 렌더링하고 state와 prop을 관리하는등 그렇다면 SideEffect란 무엇일까애플리케이션에서 일어나는 다른 모든 것을 뜻한다.예를 들면 http re

state 관리를 도와주면 useState와 비슷하지만 더 많은 기능이 있고 더 복잡한 state에 유용하다.하지만 항상 기능이 더 많다고 해서 더 좋은건 아니다! 사용이 더 복잡하기 때문에 따라서 useState를 고집하되 필요한 경우에만 useReducer를 사용하

앞서 우리는 props를 필요한 컴포넌트간 direct로 연결되는 건 불가능하다고 했다. 그러면 프로젝트규모가 커지면 몇가지 문제점이 생기는데 너무 많은 불필요한 함수들이 생긴다는 것이다. 단지 data를 옮기려고.그래서 실제로 필요한 데이터를 부모로부터 받는 컴포넌트

project 구성 directory 목록 우선 DB table 별로 directory가 있으면 좋을 것 같다. index.html 작성 큰 div에 mount point가 있다. img 로드 img파일은 css 모듈처럼 import해와서 써야한다. 왜냐하면 빌

리액트가 작동하는 방식 리액트는 상태나 props, 컨텍스트, 컴포넌트에 변경이 발생하면 컴포넌트 함수가 재실행되어 리액트라 이를 재평가한다. 하지만 이 재평가가 DOM을 다시 랜더링하는 것은 아님을 알아두어야 한다. 리액트에 의해 컴포넌트 함수가 재실행된다고 해서 실

리액트에서 state라는 것은 상당히 중요한 개념이다. state는 컴포넌트를 다시 렌더링하고 화면에 표시되는 것들을 바꿔준다.useState hook을 이용하여.따라서 가장 일반적인 형태의 managing state는 useState hook이다. 이를 이용하여 새로

최근 react에서 거의 쓰이지 않는다. error boundaries 때문에라도 최근에는 거의 사장된 방법이다.하지만 특정 third party library에서는 아직 필요함으로 혹시 모르니 공부해보겠다.function형 component는 return을 기반으로

font-end를 위한 back-end 툴이다. 마치 back-end를 위한 툴이 postman이듯.이것은 DB가 아니다. 하지만 우리가 request를 할 때 완전한 REST API를 제공하는 back-end app이다.우선 공홈에 google로 로그인한다. 그리고

Fetch API 앱으로 직접 데이터를 가져오거나 저장하고, 연결을 맺는 행위는 절대 해서는 안 된다. 만약에 클라이언트 내부에서 DB에 직접 연결을 하게 된다면 또는 브라우저의 자바스크립트 코드를 통해 DB의 인증 정보를 노출시키는 행위이기 때문이다. 잊지 말아야

최초 페이지 로드시 data를 로드해야하는 sideEffect 때문에 useEffect 코드를 사용하였고위 코드로 인하여 무한 루프가 이루어지지 않도록 useCallback을 사용했다.코드 초기부분에는 앞서 있을 error코드가 남아있지 않도록 초기화해주는 구문이다.e

결국 정규함수와 똑같다. 내장 훅이라든지, useState와 같은것과 마찬가지로 말이다.차이점은 안에 state를 설정할 수 있는 로직을 포함한다는 것이다.또한 커스텀 훅은 다른 Custom Hook을 포함한 다른 리액트 훅을 사용할 수 있다.따라서, useState나

우리가 http request와 관련된 훅을 만들 때 신경써야할 부분이 몇가지 있다.오류 상태를 설정하고 오류를 다루는 부분 역시 커스텀 훅의 일부가 되어야 한다그렇게 하면 이름도 좀 더 일반적이 되고 내부에 있는 로직을 좀 더 일반화할 수 있다.이 훅은 어떤 종류의

폼은 굉장히 단순해 보일 수 있지만 실은 그렇지 않다.하나 이상의 입력 값이 모두 유효하지 않을 수 도 있고 모두 유효할 수도 있고 또 서버로 request를 보낸 뒤에 특정 값이 사용 가능한지 검증을 해야하는 비동기 유효성 검사도 해야하기 때문에 생각보다 복잡하다.1

fetch와 useEffect useEffect로 입력한 함수는 promise를 반환해서는 안 된다. 돼냐하면 useEffect에 입력한 함수는 실행 가능한 cleanup 함수를 반환할 수 있기 때문이다. 그런데 cleanup 함수는 동시에 실행해야 한다. 즉, p

Sidebar 구현하기 최근 React로 프로젝트를 진행하며 Side를 구현할 일이 생겼다. 하지만 모두 Ref와 Effect 훅을 사용하여 구현하는데 문제는 모든 요소가 한 컴포넌트에 몰려있어 lean하지 못한 컴포넌트가 탄생한다. 이에 매우 직관적이고 쉽게 코드를

우리는 단순히 한개의 컴포넌트에서만 이루어지는 Local State, 또는 Property로 data를 주고받는 Cross-Compoents State, 또는 App 전체에 영향을 주는 유형검사 또는 context를 사용했다.리덕스도 마찬가지로 같은 일을 한다. 그럼

문제점 앞서 포스팅 예제 코드처럼 redux의 store가 아래와 같이 짜여졌다면 몇가지의 문제점이 생긴다. 오타 혀용 X action의 값을 === 식으로 식별자를 찾아가면 리튜서는 단 하나의 오차도 허용하지 않는다. 심지어 협업을 하다보면 식별자들간의

비동기 우리가 사용하는 리듀서 함수는 반드시 순수 함수여야 하며 sideEffect가 없고 동기여야 한다. 이는 useReducer 훅도 마찬가지 이다. 같은 input이라면 항상 같은 값이 return되고 이를 중간에 가로채는 비동기코드, sideEffect는 없다

역시 리액트는 모든 컴포넌트와 코드들이 lean하게 짧고 간결한 코드를 유지하여야 한다. 그래서 cart-slice.js에 들어있는 async 함수(action creators)와 기존 slice 를 분리하여 관리하주면 좋다.createSlice에는 항상 3가지 pro

라우팅이란? > 서로 다른 URL 즉 URL의 여러 경로로 서로 다른 페이지를 로드할 수 있는 기능 우선 그동안 우리가 만든 페이지는 1개의 페이지 밖에 존재하지 않는다. 이런 웹의 단점은 한가지의 URL만 갖고있어 공유할 때 메인 페이지 밖에 안 보이고 다른 기능들

404page 작성하기 사용자가 정해진 path말고 임의의 경로를 검색하여 들어올 때 찾을 수 없음을 나타내주어야 한다. 그렇다면 당연히 Route들이 모여있는 Routes 태그로 가야한다. 바로 astarisk를 사용하여 "wild card"라고도 부른다. 프로그

이 컴포넌트의 상위 컴포넌트에 state가 변경되었음을 알려야할 때이 컴포넌트가 로드되거나 변경될 때마다 코멘트를 가져오도록 리퀘스트를 보낼 때이는 파라미터가 변경될 때마다 이 효과가 다시 실행된다는 뜻이다. 위 코드에서는 파라미터가 하나뿐이지만, 만약 더 많은 파라미

Route를 감싸는 태그 변환exact prop의 삭제 => exact가 default로 실행되어 이제 항상 정확한 path만들 찾아감.이때 만약 경로의 초반부분만 startwith하고 나머지는 아무거나 와도 상관없다면이렇게 작성하면 된다.또한 V6에서는 최적의 라우트

그동안 우리가 작성해온 방식은 조금 convention한 코드였다. 이런 코드의 단점은작성할 코드가 제법 많고 자체적으로 관리하기가 복잡하다앱이 커지면 코드도 더 복잡해진다.컴포넌트로 이동을 시작하자마자 데이터를 가져오는 게 아니라 컴포넌트가 로드된 다음에야 데이터 f

위 함수들을 사용하여 불필요한 메모리 낭비를 막을 수도 있다.관련 포스팅해당 코드가 필요할 때만 그 특정 코드를 로딩하는 것이다.React 싱글 페이지 애플리케이션을 사용하면, 결국 큰 자바스크립트 코드 번들을 빌드하게 되고 해당 사이트를 사용하려면 웹 사이트의 모든

우리는 살면서 테스트 코드가 매우 종요하다고 귀에 못이 박히도록 들었다.그럼 testing을 정확히 무엇일까?이미 우리 과정에서 많은 테스트들을 해봤다. 다만 이것은 Manual한 테스팅이었다.다만 이 방법은 오류 발생이 쉽다 Manual한 방법으로는 가능한 모든 조합

우선 creat app을 실행하면 globlas.css에 자동으로 들어가있는 css가 있다.대략 85번째 줄에 저렇게 들어가있는데 우선 넘친다고 다 가려버리면 스크롤이 안 먹기 때문에 저 코드는 삭제하고스크롤 바를 안 보이게 해주는 속성값을 넣어준다.드래그이때 확장성을

우선 virtual dom을 이해하기 앞서 브라우저의 작동방식을 이해해야한다.브라우저가 서버로부터 HTML을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱하고 DOM node로 이루어진 트리를 만든다. 외부 CSS파일과 각 엘리먼트의 inline 스타일을 파싱한다.스타

Authentication 웹사이트에 인증 기능은 왜 필요할까? 보호해야할 정보가 있기 때문이다. 예를 들어 개개인 마다 고유의 url endpoint가 있다고 하자 그런데 이게 유출되면 아무나 url full path를 치고 들어와서 설정을 헤집어 놓을 수 있

Context API의 단점 앞서 포스팅 했듯 context의 한계점은 명확하다. 또 극한의 성능충들은 대규모 플젝이 아닌이상 굳이 서드 파티 라이브러리까지 끌어와서 사용할 이유가 없다고 생각할 수 있다. 그래서 성능충(나)를 위한 useState만으로 Contex

리액트 빌드 프로세스 vanilla JS 그동안 우리는 기본적으로 header 에 를 추가하거나 혹은 모듈로 import 를 했었다. 하지만 React 에선 하지 않아도 되는데 이는 리액트의 빌드 프로세스 덕분이다. React React 기본 index.html