React

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리라이브러리 : 자주 사용되는 기능을 정리해 모아 놓은 것 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 필요할 때 가져다 사용하는 형태유저 인터페이스 : 사용자와 컴퓨터 프로그램이 서

새 터미널에서 개발모드 실행하기기본 웹 브라우저를 chrome으로 설정이 안되어있으면내 컴퓨터 설정에서 기본 웹브라우저를 chrome으로 설정해두면 된다. 개발 모드 종료하기 React developer toolsreact를 활용한 웹페이지에서 개발자도구를 볼 때Com

리액트에서 지원하는 JSX문법자바스크립트 파일 안에 html 태그를 사용하는 문법자바스크립트와 html을 섞어서 쓸 수 있는 자바스크립트의 확장된 문법JSX에서는 카멜표기법 사용여러 단어가 조합된 속성에서 카멜표기법 사용리액트에서 JSX문법을 활용할 때는반드시 하나의

JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체{$$typeof: Symbol(react.element), type: "h1", key: null, ref: null, props: {…}, …}이 리액트 엘리먼트를 ReactDOM.render 함수의 아규먼트

리액트에서 이렇게 컴포넌트에 지정한 속성들Props는 Properties의 약자 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달된다.컴포넌트를 활용할 때 속성값을 다양하게 전달하고 이 props 값을 활용하

상태가 바뀔 때마다 화면을 새롭게 그려내는 방식으로 동작한다.리액트에서 state를 만들고, state를 바꾸기 위해서는 일단 useState라는 함수를 활용useState 초기값 설정 useState 함수가 초깃값을 아규먼트로 받고 그에 따른 실행 결과로 요소 2개를

조금 더 간단하게 useState를 사용하기여기서 a || b위 표현식의 경우, a가 truthy 값인 경우 b는 무시되고 a가 결괏값으로 나온다. 반대로 a가 falsy 값인 경우 b가 결괏값으로 나온다.falsy 값의 예시)nullNaN0빈 문자열undefined나

속성명 쓸 때는 카멜표기법으로!공통적인 baseButton style을 만들고각각의 blue, red Button의 style을 만든다.Button 함수에 color props를 추가하고style 변수를 만든다 (color가 'red'이면 redButtonStyle을.

import할 때 경로를 꼭 작성한다.classNames라는 변수를 만들어 활용한다.

터미널 창에 npm run build를 입력해주면build라는 폴더가 생성이 되고 그 안에 html파일, css파일, js파일 등이 있다.npm저장소에서 serve라는 프로그램을 다운받고 방금 생성한 build라는 폴더에서server를 실행하게 된다. 종료하려면 Ctr

텍스트 커서를 단어로 옮겨 놓으면 해당하는 변수나 함수가 하이라이팅된다. 윈도우즈Ctrl + Shift + L맥Cmd + Shift + L멀티 커서 선택을 하면 여러 군데를 한 번에 수정할 수 있다. 원하는 위치에 텍스트 커서를 만들 수 있다.윈도우즈Alt + 클릭맥O

App.js에서 items라는 이름으로 mock.json파일을 import 해준다. import items from "../mock.json";mock.json 파일에서 작성한 파라미터 값들을 props로 가져온다.ReviewListItem라는 컴포넌트를 만들어서 pr

보여줄 배열을 해당 요소가 제외된 배열로 변경해야한다. 그리고 리액트에서 재렌더링을 해서 변경된 데이터를 보여주어야 한다.이렇게 배열이 바뀔 때마다 재렌더링을 해야하니까 배열을 저장하는데 State를 사용해야한다. 배열에서 특정 항목을 삭제할 때는 filter()라는

React_12_filter에서 삭제 버튼만들기에서 크롬 개발자도구를 통해 확인해보면경고창이 뜬다. 고유한 key값을 가져야한다고 경고창이 뜬다. 여기서 child는 map메소드에서 랜더링한 것을 의미한다.이 경고를 없애려면 랜더링할 때각 랜더링 요소의 최상위 태그에

개발자 크롬 도구에서실습서버를 이용하여 fetch()를 사용해보면네트워크를 클릭하여 확인해보면paging - 데이터 추가 로딩에 쓸 값을 담고있다. reviews 라는 프로퍼티를 가지고 있는 것을 확인할 수 있다.펼쳐보면 앞에서 사용했던 mock데이터와 같은 객체로 되

페이지를 열었을 때 알아서 데이터를 불러오도록 만들려고 한다.App 컴포넌트 함수를 실행하면 코드를 하나씩 실행하다가 handleLoad() 함수를 실행하게 되는데이 함수는 비동기 함수이므로 현재 실행 중인 컴포넌트와는 별도로 실행되었다고 생각하면 된다.그 다음 ele

책의 페이지처럼 데이터를 나눠서 제공하는 것많은 양의 데이터를 제공할 때 사용하는 방법개수를 기준으로 데이터를 나눈다.특정 데이터를 가리키는 값지금까지 받은 데이터를 표시한 책갈피데이터를 중복이나 데이터를 빠짐없이 받아올 수 있는 장점이 있음페이지네이션오프셋 기반 =

&&show 값이 true이면 랜더링하고, false면 랜더링 하지 않는다.\|\|hide 값이 true이면 랜더링하지 않고, false면 랜더링 한다. 삼항 연산자를 사용하면 참, 거짓일 경우에 다르게 랜더링해줄 수 있다.toggle 의 값이 참일 경우엔 '✅'을,

전에 했던 작업에서더보기 버튼을 누르고 삭제버튼을 눌러 데이터 로딩이 완료되면 삭제 버튼을 눌렀던 요소가 다시 생겨나게 되는 오류가 생긴다.더보기 버튼을 누르면 handleLoadMore함수가 실행이 된다. 이 함수는 order, offset, limit라는 값으로 h

useState함수에 값을 전달하면 초기값으로 지정할 수 있다.초기값을 계산해서 넣는 경우 콜백을 사용하면 좋다.하지만 아래 코드에는 문제점이 있다. savedValues 라는 값은 처음 렌더링 한 번만 계산하면 되는데,매 렌더링 때마다 불필요하게 getSavedVal

네트워크 탭에서 'slow 3G'로 확인해보면로딩처리를 해주지 않았기 때문에더보기 버튼을 누르면 아무 변화가 없고더보기가 완료되기 전에 여러 번 클릭할 수 있다. 그럼 불필요하게 중복된 요청을 보내고 화면에도 동일한 데이터가 반복돼서 추가된 것이 보인다.이런 문제를 막

만약 인터넷이 안좋아서 리퀘스트를 보내는데 실패하거나리퀘스트를 보냈지만 에러리스트를 보내는 경우 어떻게 될까?잘못된 값으로 State 값으로 변경하려고 시도하거나심한 경우에는 동작이 멈출 수 있다. 리퀘스트를 보낼 때는 이런 것들을 고려해서 에러 처리를 해주는 것이 안

useEffect() 디펜던시 리스트를 order, search와 같이 사용하면 order State가 변경될 때마다 콜백이 호출되도록 한다. 이렇게 하면 검색어가 바뀔 때마다 새 리퀘스트를 보낼 수 있다.그리고 handleLoad 함수에 전달할 옵션 값으로 searc

리뷰를 작성하고 수정하는데 사용할 컴포넌트 만들기ReviewForm 컴포넌트를 만든다. 리액트에서는 input의 값을 State로 관리한다.State값과 input의 값을 동일하게 만드는 것이 핵심이다. (제어 컴포넌트)영화 제목을 받을 title이라는 State를 만

입력폼에 입력값을 입력하고 전송하기1\. 확인버튼을 만들어주고 type은 submit으로 해준다.submit으로 지정한 버튼을 만들어주면 확인버튼을 클릭했을 떄 Form 태그에 onSubmit이벤트가 발생한다. 2\. handleSubmit이라는 함수를 만든다.일단 콘

앞에서 구현한 입력폼을 각각의 State로 관리하는 것이 아니라하나의 State로 바꾸어보기input태그에 name속성을 활용하는 것이 핵심이다. 이벤트에서 name값을 가져올 수 있다는 점을 활용하면 된다.1\. values라는 State를 만들고 초기값으로는 객체로

앞에서 input을 사용할 떄 State를 만들고 value prop으로 내려주었다.onChange prop으로 State를 변경하는 handleChange함수를 내려줬었다.이렇게 하면 리액트 State와 input의 value를 일치시킬 수 있었다. 이런 방식은 제어

리액트에선 순수 HTML과 다르게onChange Prop을 사용하면 입력 값이 바뀔 때마다 핸들러 함수를 실행oninput 이벤트와 같다고 생각하시면 된다.리액트 개발자들은 주로 onChange 라는 Prop을 사용 태그에서 사용하는 속성인 for 는 자바스크립트 반복

클릭하면 파일 선택창이 뜨고 이미지 파일을 선택하면미리보기가 보이도록 만들 예정1\. 폼을 다루는 input 만들기선택할 파일 State를 담을 value State를 만든다.2\. handleChange라는 함수를 만든다.이벤트 객체의 target.files를 통해서

원하는 시점에 실제 DOM노드에 접근하고 싶을 때 사용할 수 있는 propuseRef라는 함수로 ref객체를 만들고 inputRef라는 변수에다가 지정해준다. 그리고 useEffect함수를 사용해서 처음 랜더링되었을 때만 inputRef을 콘솔로 보여주기그리고 inpu

파일 인풋의 value 속성은 사용자만 직접 바꿀 수 있고자바스크립트로 바꿀 때는 빈 문자열로만 바꿀 수 있다. value 속성을 빈 문자열로만 바꾸어주면 선택한 파일이 초기화된다. 이것을 이용하여 파일인풋을 초기화하는 버튼 만들기FileInput 컴포넌트에서 inpu

DOM 노드를 참조할 때 useRef 함수로 Ref 객체를 만들고이것의 current 라는 프로퍼티를 활용useRef 함수로 Ref 객체를 만들 수 있다. ref Prop에다가 앞에서 만든 Ref 객체를 내려주면 된다. Ref 객체의 current 라는 프로퍼티를 사용

이미지 파일을 선택했을 때 미리보기를 보여주도록 만들기ObjectURL을 사용파일 객체를 ObjectURL로 만들면 파일에 대한 주소를 만들 수 있다. 인터넷에 올린 파일 링크 값이 사용자 컴퓨터에 있는 파일을 주소로 사용할 수 있다. 1\. FileInput 컴포넌트

ObjectURL은 만들 때마다 웹 브라우저에 메모리를 할당한다.Side Effect다른 파일을 선택하거나 파일 선택을 해제했을 때 메모리도 같이 해제해주어야한다.이 때 사용하는 함수가 revokeObjectURL이라는 함수이다.useEffect함수는 사이드 이펙트를

사이드 이펙트는 한국어로는 '부작용'이라는 뜻예를 들면 감기약을 먹었을 때감기 증상은 없어졌지만 (작용)피부가 붉게 올라오면 (부작용)이 약에는 부작용이 있다고 할 수 있다.프로그래밍에선 말 그대로 외부에 부수적인 작용을 하는 걸 말한다. 위 코드에서 add 함수를 보

1\. 별점을 입력하는 컴포넌트 만들기Rating.js 파일을 만들고Rating이라는 컴포넌트와 Star라는 컴포넌트를 만든다. Star컴포넌트는 별 하나를 보여주는 컴포넌트이다.selected라는 prop의 역할은 값이 참일 때,selected라는 css 클래스를 추

1\. 우선 Rating 컴포넌트에다가 onSelect라는 prop을 추가해준다.Star 컴포넌트의 prop으로 내려주어서클릭했을 때 해당하는 rating값으로 함수를 실행할 것이다.이 함수는 별점 인풋을 만들었을 때 클릭한 값을 입력하는 용도이다.Rating 컴포넌트

전송할 데이터를 만든다.FormData라는 것으로 데이터를 만든다.우리가 사용할 api에서는 파일 업로드를 편하게 하려고 폼 데이터형식을 받기 때문에사용하는 것이다. formData 생성자로 변수를 하나 만들고 여기다가 append함수로 작성해준다. key와 value

앞에서 리뷰를 생성하는 api를 연동해보았는데확인버튼을 누르는 순간 리뷰를 생성하면화면에 곧바로 반영이 되지않는 문제점이 있었다. api에서는 리뷰생성에 성공하면 성공한 데이터를 보내준다.이것을 활용하면 새로고침없이 화면에 반영해 줄 수 있다. App 컴포넌트를 확인해

글 수정하기수정버튼을 누르면 입력버튼이 나타나고 내용을 입력한 다음에확인버튼을 누르면 입력폼이 닫히면서 내용이 수정되는 기능1\. 수정버튼을 눌렀을 때 입력폼을 보여주기ReviewList 컴포넌트에서 현재 수정중인 요소를 기억해두고 랜더링할 떄는 해당하는 요소만 입력폼

앞에서 수정 버튼을 눌렀을 떄 입력폼이 나오도록 했다.리뷰 수정 api를 연동하기ReviewForm 파일을 살펴보면똑같은 입력폼을 써서 글을 작성하거나 수정하지만ReviewForm 컴포넌트 입장에서는 이게 작성하는 상황인지 수정하는 상황인지 알 수 없다.대신 상위 컴포

앞에서 임시로 만들었던 삭제 기능에다가 리뷰 삭제 api를 연동하기 리퀘스트 함수를 구현하고 이것을 연결만 해주면 된다. 개발자도구에서 테스트해보기response에서 적당한 아이디를 골라서 DELETE 메소드로 보내본다.리퀘스트가 잘 보내지고 리스폰스로는 빈 객체가 도

useStateuseEffectuseRef 같은 함수이렇게 리액트에서 use~ 로 시작하는 함수를 React Hook 이라고 한다.일반적으로 후크는 어딘가에 걸 수 있는 고리를 의미프로그래밍에서 Hook코드를 다른 프로그램에 연결해놓으면 그 프로그램이 나중에 내 코드를

Hook을 사용할 떄 지켜야할 것들 Rating.js 파일을 수정하면서 알아보기예) 리액트 Hook을 컴포넌트 함수 밖에서 사용하면 오류가 난다.리액트 Hook은 컴포넌트 함수 안에서 사용하도록 만들어 진 것이기 때문에반드시 컴포넌트 함수 안에서만 사용해야한다. 오류

네트워크 처리 코드를 정리해보기App.js파일에서 handleLoad함수에서 try catch문을 살펴보면try 블록에서는 isLoading State를 true로 만들고catch 블록에서는 Error State를 변경해준다. finally 블록에서는 isLoading

useCallback 지금까지 만든 것을 살펴보면 잘 동작하는 것처럼 보이지만 한가지 문제점이 있다. 콘솔창을 확인해보면 useEffect Hook에서 handleLoad라는 디펜던시가 빠져있다고 한다. 이 메세지는 개발모드에서 코드를 검사해서 알려주는 것 re

아래 코드는 num 버튼을 누르면 num 스테이트 값이 증가되고,count 버튼을 누르면 count 스테이트 값을 증가시키는 컴포넌트이때 count 스테이트 값을 증가시키면서 콘솔에는 num 스테이트 값을 출력한다.useEffect Hook에서는 1초마다 addCoun

반드시 리액트 컴포넌트 함수(Functional Component) 안에서 사용해야 함컴포넌트 함수의 최상위에서만 사용 (조건문, 반복문 안에서 못 씀)초깃값을 계산하는 코드가 복잡한 경우에 활용비동기 함수에서 최신 State 값을 가져와서 새로운 State 값을 만들

앞에서 props와 state로 데이터를 다루었다.프로젝트의 규모가 커지면 이것만으로 다루기 힘들다.이럴 떄 리액트에서는 Context라는 것을 사용한다.다국어기능을 예로 들어보자.리액트에서는 사용자가 값을 바꿀 수 있게 하려면 State를 사용했었다.그러면 하위컴포넌

contexts라는 폴더를 만들고 LocaleContext.js파일을 만든다. Context를 만들 때 컴포넌트와 구분하기 좋게 Context라는 이름을 붙인다. createContext라는 함수로 Context를 만든다. 이 함수는 아규먼트로 Context가 제공할

사용자가 언어값을 변경할 수 있도록 할 것이다. 리액트에서는 이럴때 State했다.1\. App컴포넌트에서 locale이라는 State를 만든다. 기본 값으로 'ko'라는 문자열을 내려준다. 그리고 이것을 Context의 value prop으로 내려준다. 2\. Loc

앞에서 만든 코드를 깔끔하게 정리하기locale State는 LocaleContext를 통해서 전달하고 있다. 지금은 LocaleContext가 App 컴포넌트에 있지만 이것을 다른 컴포넌트에 옮긴다면locale State에 대한 코드들도 옮겨주어야 한다.그런데 만약

언어가 변경될 때마다 텍스트가 바뀌는 기능 만들기각 사전에서 단어마다 어떤 번역을 보여줄 지 정해두면 언어가 바뀔 때마다 사전만 바꿔두면 된다. 이런 사전 형태의 자료구조와 리엑트 커스텀 훅, Context를 활용해서 번역기능만들기hooks 폴더에서 useTransla

Context는 한국어로 맥락이라는 뜻어떤 상황에 대한 정보를 의미'사용자가 한국어를 사용하는 상황', '사용자가 영어를 사용하는 상황' 같은여러 컴포넌트에 공유하고 싶을 때 사용Props만으로 리액트 개발을 하다 보면여러 곳에 쓰이는 데이터를 내려주고 싶을 때가 있다

화면에서 사용하는 데이터를 관리하는 것데이터의 변경을 한 곳에서 하면서 흐름을 정리데이터를 변경하고 싶으면 액션이라는 것을 만들어서 dispatcher라는 것에 전달하고dispatcher는 액션을 모아서 store라는 것에 넘겨준다. store는 들어온 데이터를 차례대

리액트 컴포넌트로 페이지를 나누는 라이브러리리액트 라우터의 핵심 컴포넌트에는RouterRoutesRouteLink4가지가 있다. 리액트 라우터에서 사용하는 데이터들을 모두 가지고 있다.현재 주소라던지 페이지 기록같은 데이터들을 가지고 있다.이게 없으면 리액트 라우터를

Routes로 감싸고 이 안에 Route 컴포넌트를 배치해본다./ 라는 경로로 들어오면 HomePage라는 컴포넌트를 보여주도록 지정했다.Route 컴포넌트에 path prop으로 경로를 지정하고 element prop으로 보여줄 컴포넌트를 지정할 수 있다.이때 ele

화면 위쪽에 있는 메뉴에 Link를 추가하면 해당 페이지로 이동이 된다.Nav.js파일에 Link 컴포넌트를 불러와서 로고 이미지와 카탈로그 메뉴를 감싸준다. Link 컴포넌트에서는 to라는 prop을 사용한다. 이동할 경로를 /와 함께 지정해주면 된다.이때 /를 맨

NavLink는 메뉴에서 사용하는 링크NavLink는 Link와 마찬가지로 사용할 수 있지만 style이라는 prop으로 함수를 지정해 줄 수 있다.getLinkStyle이라는 함수를 내려준다.getLinkStyle함수에서 파라미터로는 객체를 받는데 객체의 프로퍼티는

course목록 페이지와 course페이지를 하위 Route로 만들기우선 course라는 경로를 갖는 라우터들만 따로 Route컴포넌트로 감싸준다.그리고 여기에 path prop으로 courses를 지정한 다음에안에 있는 Route에서는 courses/를 지워준다. 이

course 상세 페이지를 동적인 경로로 바꾸겠다.우선 "react-frontend-development"대신에 ":courseSlug" 라고 적어준다.이렇게 하면 coueseSlug라는 변수로 페이지의 경로를 받아올 수 있다. 이런 것을 리액트 라우터에서는 파라미터라

없는 주소를 입력하면 빈 화면이 보인다. 경로를 찾을 수 없을 때 보여줄 페이지를 지정해보겠다.잘못된 경로로 들어갔을 때 빈 페이지가 보이는 이유리액트 라우트에서는 Routes 안에 있는 Route컴포넌트들을 하나씩 검사하면서 그려줄 컴포넌트를 결정한다. 예를 들어,

페이지에 접속했을 때 어떤 이유때문에 다른 페이지로 이동시키는 것을 리다이렉트(Redirect) - 방향을 바꾸어준다는 의미 리액트 라우터에서는 리다이렉트도 컴포넌트로 쉽게 할 수 있다. >course page를 랜더링할 때 course를 찾을 수 없으면 즉, c

검색창 만들기검색어를 입력하고 enter키를 누르거나 검색 버튼을 누르면예) 검색어: react페이지 주소 뒤에 ?keyword=react 붙여서 이동하고페이지에서는 검색된 결과를 보여주는 것을 만들 것이다.여기서 ? 뒷 부분은 쿼리 스트링이라고 부르는 것이다. 주소에

course상세 페이지에서 코스 담기 버튼을 누르면wishlist에 코스를 추가한다. 위시리스트 페이지에서 확인해보면 코스가 추가된 것을 확인할 수 있다. 매번 코스를 추가할 때마다 직접 페이지를 이동하는 것은 이상하므로버튼을 눌렀을 때 알아서 이동하는 기능을 만들 것

리액트에서 경로에 따라 페이지를 나누도록 해주는 라이브러리리액트스러운 방법으로 컴포넌트를 사용해서 페이지를 나누는 것이 특징리액트 라우터를 사용하려면 반드시 라우터라는 컴포넌트가 필요하다.그 중에서도 BrowserRouter 라는 걸 사용하였다. 이 컴포넌트를 최상위

react-helmet 이라는 라이브러리를 사용하면더 편리하게 리액트스러운 방법으로 제목을 바꿀 수 있는 방법이다. 예를 들면 위 코드처럼 Helmet 이라는 컴포넌트로 감싼 다음에,안에다가 title 태그를 배치하면 이 컴포넌트가 렌더링 될 때HTML의 title 태

클라이언트사이드 렌더링(CSR) (Client-side Rendering) 클라이언트 - 웹 브라우저 렌더링 - HTML 페이지를 만드는 것 즉, 웹 브라우저에서 자바스크립트로 HTML 페이지를 만드는 것 싱글 페이지 애플리케이션(SPA) (Single Page

다운로드 하는 버튼 Blob >blob 은 응답 데이터를 이진 데이터(Binary Data)로 받을 때 사용 이진 데이터는 파일 다운로드 등과 같은 상황에서 유용 > 용도: 파일 다운로드와 같이 이진 데이터를 요청하고 처리할 때 사용 >웹에서 사용되는 데이터

이 함수는 totalCount라는 매개변수를 받는다. page: 현재 페이지를 나타내는 상태rowsPerPage: 페이지당 행 수를 나타내는 상태totalPage: 전체 페이지 수를 나타내는 상태handleChangePage: 페이지 변경을 처리하는 함수이 함수는 주어

리액트에서의 "children"은 컴포넌트의 내용을 나타내는 특별한 프로퍼티ParentComponent는 ChildComponent를 포함하고 있다. ChildComponent를 ParentComponent의 자식으로써 렌더링하고 있다.ChildComponent가 Pa