React

React는 프론트엔드 프레임워크이다.이 React 및 UI구현을 위해 html에 javascript기능을 구현한 문법이 xml이다.위 두가지를 기억하면 xml, html을 더욱 쉽게 이해할 수 있다. javascript 환경에 맞는 html데이터 저장 및 전송을 중심

React는 data 표현과 전달이 모두 이루어지는 문법이 핵심이다.React는 기본적으로 프론트엔드목적의 라이브러리로, 넓게 보면 data 구현에 초점을 맞춘 logic 구현을 맞춘 문법을 활용한다.그러나 logic을 세부적으로 들여다보면, data 전달을 중심으

1. JSX > Javascript XML xml과 같다. 말 그대로 Javascript에서 사용하는 html 문법으로, React 그 자체로 이해하면 쉬울 것이다. JSX는 data 전달과 data 구현이 모두 가능한 문법으로, react component(=함

DB Server에 Data를 C(Create)/R(Read)/U(Update)/D(Delete)하기위해, 관련 RESTAPI를 제공하는 module이다.즉 쉽게 말하면 DB Server에 Data를 생성하고 수정하기위한 method를 제공해주는 모듈을 axios라 이

Redux를 알기위해선 먼저 React의 UI Rendering logic을 알아야 한다.React에서는 App.js라는 최상위 컴포넌트가 모든 Data를 확보 및 전송, UI rendering까지 모든 과정을 진행한다.즉 하나의 컴포넌트에서 다양한 컴포넌트 및 Dat

말 그대로 이벤트가 중첩해서 일어나는 이슈이다.EventBubbling의 예시를 보면 쉽게 이해가 가능하다.해당 요소의 event 실행시, 해당 요소를 포함하는 상위 요소의 event까지 중첩되어 실행되는 경우 "nextpage"과 같은 특정 이벤트를 실행하고, 실행하

CSS문법을 Javascript 파일 내부에서 사용할 수 있도록 해주는 라이브러리기존 CSS문법을 사용하기위한 과정은, \- CSS 구조를 별도로 선언하고 이를 구현하는 형식으로 진행되거나(React-Native)\- CSS 파일에 별도의 CSS logic을 구현하여

React에서 상태변화를 일으키는 모든 요소들을 말한다.React 문서에서 정의하고 있는 side effect는 아래와 같다.즉 DataBase에 접근하여 data를 확보하는 것부터 시작해서, data의 상태관리를 통해 DOM에 적용하기까지 상태변화에 영향을 주는 모든

말그대로 State가 있는 Component를 말한다.class에서 this 인스턴스를 통해 state에 접근하고 상태관리CASE A. class선언후 생성자 인스턴스에서 this를 통한 state관리CASE B. React Component class 중 useSta

React는 프레임워크가 아니라, app을 생성하도록 기능을 제공하는 라이브러리이다.우리가 react app을 만들때 가장 먼저 입력하는 명령어이다.npx create-react-app \[folder_name] 후 아래와 같은 구조로 프로젝트가 빌드된다.react 기

React는 Component로 구성된다. Component는 html을 반환하면서 js문법을 사용할 수 있고, 이는 JSX 문법이다.JSX문법은 React에만 적용할 수 있으며, React에 특화된 문법이다.위 코드에서 Component 구조는 다음과 같다.<A

하나의 리스트를 웹사이트에 표시하려고 할 때, List가 추가될때마다 위 코드처럼 수동으로 추가하고 추가하고..이 과정을 반복해야할까? 이처럼 List라는 Component에 food_name과 rating이라는 data를 전달해주는 방식으로 재활용이 가능하다.이는 코

javascript의 함수배열의 요소를 모두 순환하면서map의 callback 함수를 실행하고return 받은 값을 통해 새로운 배열을 생성하는 함수.위 배열의 내용 중 name을 props로 넘겨준 후, name을 이용하여 웹사이트에 출력하는 logic을 만들어보자.

map 함수의 return 값은 항상 배열이다.logic 상 오류를 방지하기위해 별도의 함수를 호출한 후,해당 함수가 return하는 형식으로 구조적인 흐름을 잘 이어주도록 만들어 줄 필요가 있다.위 코드처럼 map 함수를 사용하면서 별도의 함수나 Component를

최초 npx create-react-app 설치시 자동으로 module 설치되는 것으로 보임설치오류 발생 시 npm i (npm init) → npm 한 후에 npm i prop-types최종적으로 전달받는 Component가 props를 잘 받는지 확인하기 위해 활용

아래 내용은 state에 대한 기본적인 내용과 이해를 위한 것이다.실무에 적용하기엔 다소 무리가 있지만, 정확한 이해를 바탕으로 적용할 수 있도록 꼭 기억하고 알아두도록 하자.React 내부에서 동작하는 모든 동적 데이터, 혹은 동적 상태를 일컫는 개념이다.동적으로 관

1. lifecycle method > React.Component에서 제공하는 method로 Component의 생성과 제거를 담당한다. 이를 Component 관점에서 살펴보면, Component가 생성될 때 최종적으로 render 하기 전에 호출되는 함수/me

React의 가장 기본적인 문법과 예제로, 실무에서 직접적으로 적용할 수 있는 중요 개념이므로 반드시 익혀두자.최초 rendering 시 Loading 글자를 띄우고, 이후 상태업데이트하여 ready 화면 띄우기state / componentDidMountcompone

Data를 fetch(이동, 접근, 확보 등)하기위해 필요한 라이브러리이다.개념적으로는 fetch와 동일하지만, fetch보다 더 빠르고 호환성이 좋아서 널리 사용한다.data를 axios할 경우 유의사항을 반드시 기억하자.data axios 소요시간이 길기 때문에 이

API 등 outer source를 통해 받아온 data를 처리하는 과정을 알아본다.실무에서 매우 중요하고 직접 활용이 큰 부분이므로 반드시 잘 이해하고 있어야 한다.먼저 data를 받아오고, console.log를 통해 data(객체)의 구조를 살펴본다.객체의 구조를

최종적인 화면을 구성하기 위해 HTML 태그를 설계하고 구성한다.HTML은 화면구현 및 구조에 따라 정해진 tag를 사용하는 것이 원칙이지만, JSX 문법에서는 tag역할이 정해지지 않았으므로 구조 상 잘 선택하여 사용한다.tag는 상위 부모태그인 container t

웹페이지를 "꾸미기 위해" 관련 기능과 도구를 제공하는 라이브러리의 일종Cascading Style SheetsCascading 은 폭포, 상속의 뜻을 가지고 있다.Style Sheets가 상속된다는 개념으로, 상위 속성의 Style이 하위 속성으로 폭포처럼 퍼진다(영

주어진 객체 및 배열의 요소를 모두 확인하고, 새로운 배열로 반환해주는 함수요소가 여러가지가 있을 때 유일한 값을 선정하여 key 값에 할당해주어야 한다.만약 key 값에 할당해주지 않으면 아래와 같은 prop 오류가 발생하는데,치명적인 오류는 아니기 때문에 실행 자체

1. React router > 요청한 url 및 경로에 맞게 component를 rendering하는 과정 쉽게 말하면 특정 웹사이트 주소에 따라 component 화면을 구현할 수 있도록, 주소(url 경로)와 component를 서로 연결하는 과정 혹은 기능을

별도의 url 요청없이 EventTrigger(클릭 등)을 통해 다른 Component(페이지)로 전환하는 기능을 말한다. Navigation을 구성할 때는 다음과 같은 유의사항을 생각하면서 구조화를 진행한다.Component로 구성하여 Navigation compon

위와 같이 영화가 설명되는 부분을 클릭하면 해당 영화의 상세 내용을 보여주는 페이지로(=AboutPage) 전환하는 구조를 만들어본다.단순 url 요청이 아닌, Router에 의해 정의된 url 요청은 react-router-dom으로부터 기본적으로 props를 디폴트

쉽게 말하면 function component나 class를 따로 사용할 필요없이 function component에 class 기능을 구현하여일관된 React component programming을 가능하게 해주는 기능을 말한다.기존 Component (functi

React hooks를 활용하여 input value를 update하는 함수를 구현한다.문자열 변수인 name에 useInput hook을 호출하고, useState hook을 활용하여input value를 update 해주는 구조를 만들어본다.기본적인 input ta

React hooks를 활용하여 주어진 데이터(배열) 중 특정 데이터만 선별하여 표현하는 함수를 구현한다.선별할 데이터 및 관련 내용을 담을 객체를 배열변수에 구성한다.content로 선언된 배열에 객체 데이터들을 저장한다.기본적인 render 구조를 구성한다.먼저 최

useState와 함께 가장 대표적인 hook 중 하나이다.Class에서 제공하는 method 중 ComponentDidMount, ComponentDidUpdate, ComponentWillUnmountlifecycle method 기능을 제공한다.ComponentD

useEffect를 활용하여 문서 제목을 업데이트하는 함수를 구현한다.본 함수는 화면구현이 완료된 상태에서 진행하며, 화면을 구현하기보다는 함수를 구현하는데 집중한다.App function에서 최초 rendering 되면서, useTitle 함수를 실행하고 문서제목을

특정 요소를 클릭하면 해당 요소와 연결된 함수나 event를 실행하는 함수모든 element, component, 객체 등의 reference element가 존재하는데,이 ref element를 DOM과 연결하여 해당 DOM에 접근하고 사용할 수 있도록 하는 hook

사용자가 특정 이벤트 및 작업을 실행하기 전에 경고 메시지를 발생시키는 함수Check What happens 버튼을 클릭하였을때 confirm 창이 팝업되는 구조를 구현한다.App function에 기본적인 버튼과 logic을 구현한다.위 코드에서의 confrimRes

마우스 커서가 특정 탭, 범위를 벗어났을 때 메시지를 전달하는 함수화면이 rendering 되었을 때 Window에 mouse가 페이지 범위를 벗어났을 떄의 이벤트를 add하고, 해당 이벤트가 발생하면 log를 출력하는 함수를 먼저 구현한다.useEffect를 사용한다

요소가 화면에서 서서히 나타나도록 하는 함수 (style opacity를 이용)tag 내부의 style option에 opacity를 넣어 투명도를 조절할 수 있다.CSS이므로 이중괄호({{}})를 넣어야 구현할 수 있다.투명도는 낮을 수록 투명하고, 높을 수록 불투명

scroll을 하면서 특정 범위에 도달하였을 때 글자색 등을 바꾸는 함수vh, viewport height수직(화면에서의 상하)으로 표현하는 전체 스크린을 상대적 크기로 반환하는 인자이다.전체화면의 기준은 100vh이다.height : '1000vh' 일 경우 전체 스

시스템 알람을 실행하는 함수Notification 지원 여부를 사전에 확인한다.보통 window에 접근하여 특정 함수나 logic을 실행하는 경우, 내장되어있는 API를 사용하는 경우가 많다.이러한 API를 사용할 때는 공식문서를 참조하여 사용하는 것이 가장 효율적임을

외부 url 및 data를 요청하는 axios API를 customized한 함수로 구성하며, API요청 시 error 및 data를 log로 출력하는 기능을 제공한다.axios를 통해 url을 요청하고, API를 받아와 log에 data를 출력하는 구조를 구현한다.u

외부 url 및 data를 요청하는 axios API를 customized한 함수로 구성하며, API요청 시 error 및 data를 log로 출력하는 기능을 제공한다.axios를 통해 url을 요청하고, API를 받아와 log에 data를 출력하는 구조를 구현한다.u

react-router-dom package가 version6로 update되면서 많은 부분이 달라졌다.업데이트를 체감한 부분 중, 그 중에서도 달라진 부분은 아래 두가지와 같다.Routing component를 구성하는 방법Link to에서의 props 전달 불가특히

실무에서는 styled-component도 javascript와 같은 유연한 동작이 가능하다.반응형 동작(특정 조건에서만 CSS속성 등이 반영되도록 구성), 변수(${variables}) 등이 유연한 동작의 대표적인 예시라 할 수 있다.이 부분은 비단 프론트엔드와 함께