React JS

ReactJS 입문하기: Vanilla JS와 React JS 비교 / 쌩 React JS 사용하기

JSX JSX는 JavaScript를 확장한 문법이다. 기본적으로 HTML에서 사용한 문법과 흡사한 문법을 사용해서 React 요소를 만들 수 있게 해준다. 생긴게 HTML이랑 비슷해서, JSX로 React 요소를 만드는게 개발자들 입장에서는 더 편하다 ^^ 맞는 말이

React의 state >#3.0 Understanding State 질문 어떻게 하면 React 어플에 값이 바뀔 데이터를 담아줄 수 있을까? state: 기본적으로 데이터가 저장되는 곳 현재 우리는 counter를 증가시켜서 UI(user interface)에

#3.4 State Functions state(App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체)에 대해 배웠다. 계속 연습해보자. 사용자들의 input을 어떻게 얻는지, form 만들었을 때 state는 어떤 방식으로 작용하는지 등을 배우고

#3.5 Inputs and State >참고 react, reactdom을 import하는 script tag에서 production은 배포 모드, development는 개발 모드를 의미한다. 개발모드는 버그로 이어질 수 있는 요소들을 미리 경고하는 검증 코드가

Make a converter with many units. 원리

분리해서 정복하기(devided & conquer) isolation & encapsulation을 통해 모든 JSX를 분리된 컴포넌트로 만들었다. 예컨데 같이 고립시켜서(isolated) 분리된(seperated) 컴포넌트를 만들었다. 앞으로 리액트로 어플리케이

#4.0 Props Props Props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 일종의 방법이다. 1. 기존 예제로 설명을 해보자. 부모 컴포넌트: `` 자식 컴포넌트: `, , ` 현재 이 예시에서 자식 컴포넌트의 경우, 그다지 부모

#4.1 Memo onClick={changeValue} 커스텀 컴포넌트 안에 넣는 이벤트리스너 처럼 생긴건 그냥 props이다. html 요소 안에 넣는게 이벤트스너다. ![](https://images.velog.io/images/summereuna/post/a

#4.2 Prop Types Props 컴포넌트의 환경을 우리가 원하는 만큼 설정할 수 있게 해 주는 props! text, boolean 타입도 보낼 수 있고 원하는 건 다 보낼 수 있다. >❗️문제는 너무 많은 props를 가지면 실수를 할 수도 있다는 점이다.

📝 CRA(create-react-app) 여태까지 만든 리액트 어플리케이션은 스크립트는 import해서 만들어야 했고 다 직접 했다. 리액트 어플리케이션을 만드는 최고의 방식 CRA! create-react-app을 사용하면 ReactJS 어플리케이션을 만드는게

React의 state, prop을 배웠고 이제는 Effect를 알아보자.ReactJS가 어떻게 작동했는지 상기해보기 위해 예시를 하나 보면서 시작하자.counter로 예시 하나를 만들어 보자.컴포넌트가 렌더될 때 콘솔로그가 이렇게 찍힌다.이처럼 state가 변할 때

ReactJS ReactJS는 새로운 데이터가 들어올 때, 즉 변화가 있을 때 마다 전체를 refresh(새로고침)한다. 새로운 데이터가 들어올 때마다 자동 새고가 되기 때문에 UI 관점에서는 좋다. useState() useState()를 사용하면 state가 변할

]

useState, useEffect, prop을 사용하여 To Do List를 만들어 보자. part 1 input을 만들고 input의 value 값이 변하는 것에 따라 state가 변하도록 작성 form 안에 input을 넣고 button 추가 form에 onS

📝 리액트 연습하기 위해 암호화폐 및 가격 나열하는 단순 프로젝트 만들기 🔥 Goal 앱에 들어오면 로딩 메시지 보여주기 코인들 나열 완료하면 로딩 메세지 숨기고 코인 리스트 보여주기 🔥 Hint useState() 사용해 상태 관리 useEffect() 사

📝 Making Movie App goal **영화 소개, 링크 걸어 더 많은 정보 볼 수 있는 Movie App을 만들어 보자. ** 첫 화면: api 불러올 때 로딩화면 보여주다가 api 로딩 완료되면 모든 영화 리스트 보여주기 영화 누르면 앱 안에서 페이지 전

퍼블리싱 1. gh-pages 인스톨 내 결과물(production)을 github pages(무료제공)에 업로드 할 수 있는 패키지를 다운 받아보자. npm i gh-pages 2. build 명령어 수행 📍 pakage.json에서 scripts 확인해 보자.

리액트 배우면서 우와 이런 신세계가 있다니라며 놀랐었다.배움의 즐거움도 잠시.. 기능 파트를 끝내고 디자인을 하러 넘어 온 css를 작성하며 일종의 난관에 봉착했다."이 css파일은 어느 폴더에 넣어야 하지...?"가장 효율적인 방식으로 한 눈에 봐도 뭐가 뭔지 딱딱

React | Font Awesome Docs React에서 Font Awesome을 시작하려면 npm 및 yarn 같은 패키지 관리자를 사용하여 패키지를 설치해야 한다. 01. 세팅 SVG + JS 메서드를 사용하여 아이콘을 렌더하는 방식(v.6.1.1.) 1

리액트 작업을 하면서 마크업을 할 일이 생각보다 많은데 기존 html에서 쓰던대로 emmet을 사용하려 했더니 안되는 것이 아닌가! 구글링하니 쉽게 react에서 emmet사용하는 방법을 찾았다. 먼저 아래로 들어가서 이멧을 세팅하자! Code > Preferen

useEffect 무한 루프 탈출하기

리액트에서는 state 혹은 props이 변경될 경우 리렌더링이 발생한다. 부모의 state를 props으로 받는 컴포넌트A와, 단순히 onClick()함수를 props으로 받는 컴포넌트 B가 있다고 하자. 부모의 state가 바뀌면 부모 뿐만 아니라 자식 컴포넌트

컴포넌트는 JSX코드를 결합한 사용자 정의 html + 스타일링 + 조금의 JS 로직이다. 사용자 인터페이스를 구축하기 위해 모든 컴포넌트를 생성한다. 작은 빌딩 블럭으로 사용자 인터페이스를 구축하는 접근 방법을 일반적으로 합성(Composition)이라고 한다.

React.js에서는 어떤 유형의 코드로 작성할까? 선언형(Declarative) JavaScript 코드 React.js를 사용할 때는 목표, 즉 화면에 무엇이 표시되어야 하는지를 정의하고 React가 거기까지 도달하는 방법을 알아내도록 만들어야 한다. “JSX”란

일부 자바스크립트 함수는 순수하다. 순수 함수는 계산만 수행하고 그 이상은 수행하지 않는다. 컴포넌트를 순수 함수로만 엄격하게 작성하면, 코드 기반이 증가함에 따라 전체 클래스의 당혹스러운 버그와 예측할 수 없는 동작을 피할 수 있다. 그러나 이러한 이점을 얻기 위해서

한 컴포넌트 내에서 여러개의 상태를 저장해야할 때 어떻게 해야할까? 1. 각각 따로 구분하여 다수의 state 생성하여 상태 관리 2. 객체로 묶어 하나의 state를 만들어 상태 관리 기존 상태에 의존하여 상태를 업데이트해야 할 경우 상태를 업데이트하는 방법 3

브라우저는 form이 제출될 때 마다 웹페이지를 호스팅하고 있는 서버에 요청을 보내기 때문에 페이지를 리로드한다. JS로 수동으로 데이터를 수집하여 결합하는 방법으로 폼을 제출하고 싶다면 이러한 기본 동작을 비활성화 하면 된다.event.preventDefault();

React의 상향식 통신 예제 > 📍 현재 컴포넌트 구조 App(비용 data 배열) > NewExpense > ExpenseForm(새로운 비용 data 생성) 📍 App.js 📍 NewExpense.js 📍 ExpenseForm.js 새로운 비용을 기존의 비용 목록에 추가하려면 어떻게 해야할까? ExpenseForm 컴포넌트에서 새롭게...

리액트는 선언형 코드이다.바닐라 자바스크립트에서 했던 것 처럼 수동으로 이벤트 리스너(예:"addEventListner"를 통해)를 추가하면 안된다. 이는 명령형 코드이기에 해당 코드로는 React 기능을 사용하지 않으며 React 컴포넌트 외부에 있는 일부 함수를 트

양방형 바인딩을 사용할 때 마다 제어된 컴포넌트(Controlled Component) 라고 표현한다. 여기서는 사용자 지정 컴포넌트인 `` 를 컨트롤(제어)하고 있다. ExpensesFilter에서 드롭 다운으로 선택된 값이 props인 selected를 통해

리스트(배열)와 조건부 컨텐츠 렌더링(Rendering Lists & Conditional Content) 부제: Working with really dynamic content 🎯 목표 데이터의 배열(array) 리스트 출력하는 방법 다양한 조건에서 다양한 컨텐츠

자식 컴포넌트에서 이미 부모 컴포넌트로부터 props로 데이터를 받고 있다면, 이 데이터를 활용하여 filter() 메소드를 사용하면 된다.filter()는 true나 false를 반환하는데, true를 반환하는 항목들을 새로운 배열로 반환된다.filter()는 완전히

조건부 컨텐츠는 각각 다른 상황에서 다양한 출력값을 렌더링하는 것이다. ✅ 삼항연산자 >조건(삼항)연산자 조건(삼항)연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자이다. 앞에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할

새로운 비용 추가하기 버튼을 누르면 비용을 추가할 수 있는 폼이 뜨고, 폼에서 취소를 누르면 다시 폼은 없어지고 새로운 비용 추가하기 버튼이 생기도록 만들어 보자.렌더링되는 상태가 바뀌는 것이기 때문에 상태를 추가한다. 디폴트 값으로는 false를 준다.새로운 비용 추

Expenses 컴포넌트를 좀 더 깔끔하게 사용하기 위해 let expenseContent 부터 if문을 따로 떼어보자! 📍Expenses.js ExpensesList.js 파일을 만든다. Expenses.js

1. 이 코드 예시(snippet)는 어떤 작업을 수행하는가? 배열을 React에서 출력 가능한 JSX 요소로 채워진 새 배열로 변환하고 변환 논리에 따라 새 배열을 생성하는 표준 JS 배열 메서드이다. 2. JSX 요소를 나열할 때 왜 특수한 “키” 프로퍼티를 추

📍 Expenses > Expenses.js filteredExpenses를 ExpenseChart 컴포넌트로 보내준다. 📍 Expenses > ExpenseChart.js 차트를 반환하는 `` 컴포넌트를 만들어 보자. 📍 Chart > Chart.js 📍

리액트로 웹앱을 구축할 때, 단지 컴포넌트를 구상하는 것 뿐만 아니라 로직이 제대로 작동하도록 해야 한다. 리액트 앱을 구축하는 것은 또한 앱을 스타일링 하는 것이기도 하다. 스타일링은 컴포넌트를 구축하는데 있어서 아주 중요한 부분이기도 하다. 동적으로 스타일링하는 다

css 모듈을 사용하기 위해서는 이런식으로 css 파일을 임포트해야한다. 먼저 기존 css 파일을 파일명.module.css로 바꿔준다.그리고 나서 파일명.module.css를 import 한다. 이는 css 모듈이 작동하도록 코드를 변환하라고 컴파일 프로세스에세 보내

모달은 기본적으로 페이지 위에 표시되는 오버레이로, 전체 페이지에 대한 오버레이이기 때문에 다른 모든 요소들 위에 있어야 한다. 🌀 의미적, 구조적으로 문제가 있는 모달: Real Dom에서 모달이 다른 HTML 코드 안에 중첩되어 있는 경우 아래 예시 처럼 Rea

🌀 state 기반으로 작성된 현재 코드 실제로는 form을 제출할 때만 setEnteredUsername()로 state를 업데이트하고 있는데, 현재 작성된 코드를 보면 키값을 입력 받을 때 마다 계속 state를 업데이트하고 있다. state를 사용하여 컨트롤

📝 리액트의 이펙트 useEffect(): 사이드 이펙트 대처하기

📝 Reducer란? 리액트 내장 훅인 useReducer()는 useState()와 마찬가지로 state 관리를 도와준다. 하지만 더 강력한 state 관리를 도와주는 훅인 useReducer()는 useState()에 비해 더 많은 기능을 가지고 있기 때문에

Managaing App-Wide or Component-Wide State with Context 더 큰 리액트 앱에서 마주칠 수 있는 문제에 대해 알아보자. >문제: 프롭을 통해 많은 컴포넌트를 거쳐 많은 데이터를 전달할 때 일어나는 문제 일반적으로 데이터는 프

리액트 훅 작업 규칙 리액트 훅은 use-로 시작하는 모든 함수이다. 1. 리액트 훅은 리액트 함수(React Functions) 내에서만 호출해야 한다. 리액트 컴포넌트 함수(React Component Functions) 내에서 호출 사용자 정의 훅(Custom

아이디와 패스워드를 입력한 후 로그인하는 폼이 있다고 하자.만약 사용자가 아이디와 패스워드를 입력하지 않은 채 로그인 버튼을 클릭할 경우, 자동으로 인풋에 포커스를 맞추게 하고 싶은 경우 forwardRef()를 사용하여 이를 구현할 수 있다.forwardRef()는

🌟 컴포넌트 재평가 시 real DOM의 변화 리액트는 상태, props, 컨텍스트 변경시에만 컴포넌트를 재실행하고 재평가한다. 1. 컴포넌트 재평가 시 real DOM의 변화 ✅ 리액트의 컴포넌트 재실행 및 재평가 페이지가 로드되면 App 컴포넌트는 화면에

어라? 함수는 객체일 뿐이기 때문에 App 함수 전체가 재실행되면 하위에 있는 함수들도 모두 재실행되어 새롭게 생성된다고? 그러면 이제 이런 의문이 생길 수도 있다. App 함수가 상태 변경으로 인해 재실행되면, useState 역시 계속적으로 실행되는데, 그러면 상

현재 리스트를 렌더링하고 있는데, 무작위로 입력된 배열은 간단한 내장 정렬 메소드를 사용하여 목록을 정렬하고 있다. 📍 App.js 📍 /components/Demo/DemoList.js 지금은 정렬할 요소가 많지 않지만, 만약에 요소가 엄청나게 많다고 해보자

현재까지는 더미 데이터로 로컬에서 데이터를 받아아 작업을 했다면, 이제 리액트 앱을 어떻게 백엔드/데이터베이스에 연결하는지 알아 보자. 앱에서 데이터를 데이터베이스에서 불러오거나 저장하기 위해, 리액트 엡에서 백엔드로 HTTP 요청 보내는 방법을 알아보자. 🎯 GO

HTTP: 비동기 / 대기 사용하기HTTP: 로딩 및 데이터 state 처리하기HTTP: HTTP 오류 처리하기HTTP: 요청에 useEffect() 사용하기HTTP: POST 요청하기버튼 클릭 -> fetch() 사용하여

HTTP: HTTP 오류 처리하기 HTTP: 요청에 useEffect() 사용하기 HTTP: POST 요청하기 로딩 및 데이터 state 처리하기 앱을 새로고침하고 fetch 버튼을 클릭하면 영화가 화면에 표시되기까지 시간이 조금 걸린다. 이럴 때, 실제로는 로딩 아

오류 처리하기 HTTP 요청을 전송하는 경우에도 잘못된 것이 있다면 오류가 발생할 수 있다. 네트워크 연결이 없어서 생기는 오류 네트워크 연결이 있고 요청은 전송되었지만 오류 응닫ㅂ 코드를 넘겨 받는 기술적인 오류 등 404, 500, 401 같은 HTTP Stat

HTTP 요청에 useEffect() 사용하여 데이터 패치하기 대부분의 앱에서는 특정 컴포넌트가 로딩되자마자 데이터를 가져오기도 한다. 가령 사용자가 페이지를 방문하자마자 데이터를 가져오기도 한다. 💬 현재 패치 버튼을 누르는 것에 맞춰 데이터를 패치하고 있는데,

실제로 앱에서는 데이터를 가져오는 GET 요청 뿐만 아니라, 서버로 데이터를 보내어 저장하는 POST 요청 작업도 많이 한다. 예) 새로운 사용자 생성, 블로그 글 포스팅 등 현재 사용하고 있는 스타워즈 영화 API는 단순 실습용 더미 API이기 때문에 GET 요청만

리액트 훅은 리액트 컴포넌트 함수 또는 커스텀 훅 내에서만 사용 가능하고 했는데, 커스텀 훅은 왜 만들어야 하고 어떻게 만들 수 있을까? 커스텀 훅을 만들 때 지켜야할 규칙은 무엇일까? 커스텀 훅이란? 커스텀 훅도 내장 훅이나 useState 처럼 정규 함수인데,

Working with Values, Validation & State 더 나은 사용자 경험을 위해 폼 만들기 1. 폼의 복잡성: What's Complex About Forms? 개발자의 시각에서 form은 그리 단순하지 않다. 폼은 그 입력 때문에 넓고 다양한

useEffect로 입력한 함수는 promise를 반환해서는 안된다. 왜냐하면 useEffect로 입력한 함수는 실행 가능한 cleanup 함수를 반환할 수도 있기 때문이다. 클린업 함수는 동시에 실행해야 하는데 클린업 함수는 promise 같은 것을 반환하지 않는다

이렇게 작성한 후 엔드포인트를 살짝 바꿔서 일부러 오류가 나게 해보았는데 에러만 계속 뜬다.그 이유는 fetchMeals이 async 함수이기 때문에 프로미스를 반환하는데, 프로미스 내부에서 오류가 발생하면 프로미스가 거부되기 때문이다.따라서 try-catch로 그것을

앱이 복잡해질 수록 웹사이트/웹 앱의 특정 부분에 바로 링크되면 좋다. 웹사이트 특정 부분 방문 시 그 부분을 로딩하는 URL을 제공하는 것이다. SPA 라우팅이 바로 그 부분에 사용된다. 리액트 라우터를 사용하면 매번 백엔드에서 새로운 페이지를 가져오지 않고 다양한

이벤트 페이지에서 이벤트 데이터를 fetch 해오자. fetch하면, 이벤트 페이지에 도달한 경우에만 즉각적으로 http 요청을 전송하기 시작한다. 이는 요청이 전송되기 전, 이벤트 페이지 컴포넌트 전체가 렌더링되어야 한다는 것을 의미한다. 보통은 아래 순서로 작동한

리액트 앱에서 인증이 구동되는 원리(How Authentication Works In React Apps)사용자 인증 실행(Implementing User Authentication)프로트엔드의 리액트 앱이 인증을 시행하는 백엔드와 어떻게 소통하는지인증 지속성과 자동

Authentication 리액트 앱에서 인증이 구동되는 원리(How Authentication Works In React Apps) 사용자 인증 실행(Implementing User Authentication) 프로트엔드의 리액트 앱이 인증을 시행하는 백엔드와

Authentication 리액트 앱에서 인증이 구동되는 원리(How Authentication Works In React Apps) ✅ 사용자 인증 실행(Implementing User Authentication) 프론트엔드의 리액트 앱이 인증을 시행하는 백엔드

개발에서 프로덕션으로 넘어가는 방법 (From Development To Production) 리액트 앱 로컬 머신에서 실제 서버로 옮기기 배포 과정과 위험(Deployment Steps & Pitfalls) 서버-사이드 라우팅 vs 클라이언트-사이드 라우팅(Serv

리액트 훅이란? 리액트 훅은 함수형 컴포넌트 안에서만 사용할 수 있는 특별한 함수이다. 훅 함수 이름은 모두 use-로 시작한다. 직접 커스텀 훅을 만들 때도 마찬가지이다. 예) useState(), useEffect(), useRef() ... 리액트 훅을

✅ Testing이란? 📝 Manual Testing (수동 테스팅) 개발자로서 코드를 작성해 특정 속성을 구현하거나 특정 문제를 해결하고 나서, 브라우저에서 앱을 보고 테스트한 것을 의미한다. 이는 아주 중요하다. 내가 보는 것이 사용자가 보게 될 것이기 때문이다