REACT

프론트엔드에서 하는 제어의 대부분은 상태값이 변하면, UI가 변하게됩니다.예를 들어 사용자가 무언가를 클릭하는 등의 event를 발생시키거나 api요청을 보내서 새로운 정보를 업데이트 받았을 경우가 있습니다.자바스크립트를 통해 이를 구현하는 경우 상태에 따른 UI를 바

Web Application을 위해 필요한 기능들에는 라우팅, 전역상태관리, API호출, 빌드시스템 등이 필요합니다.대표적으로 앵귤러와 같은Web Application Framework는 이러한 기술들을 내장하여 제공합니다.하지만 리액트는 라이브러리 이기 때문에 이와

React 앱을 만들기 위해 필수적인 개발 도구들Babel, Webpack, HMR(hot-module-replacemnet)...아래와 같은 디렉티브 구조를 만들어줍니다.index.htmlFollowBtutton.js이제 렌더코드를 추가해보도록 하겠습니다.index.

Babel이 컴파일러라면 Webapck은 번들러입니다. 번들러란 분리된 자바스크립트와 CSS모듈 코드를 브라우저에 최적화된 여러개의 파일로 결합합니다. React어플리케이션에 널리 사용되는 번들러에는 webpack과 Browserify가 있습니다.webpack : 웹팩

html, css, javascript가 각각의 문법이 있듯이 react도 리액트만의 문법인 JSX문법을 사용합니다.React 공식문서를 확인하면서 함께 공부를 하는 것을 권장드립니다.JSX문법을 사용한 경우JSX문법을 사용하지 않은 경우현재 div태그를 하나 만들고

JSX자체에 대한 문법은 아니지만 JSX문법을 return하면서 (즉, 렌더링하면서) 알아야하는 조건부 렌더링에 대해 살펴보도록 하겠습니다.react공식문서지난 시간에 JSX자체가 표현식이라는 것을 공부하며 아래와 같은 코드를 작성했습니다.위 코드를 아래와 같이 변경하

Components와 Props 오늘은 리액트의 꽃이라고 할 수 있는 components와 props를 배워보려고 합니다. 공식 문서를 참고하며 공부하면 더욱 도움을 받을 수 있습니다. Intro 만약 App이라는 함수가 returngksms React elem

React공식문서부모가 자식 컴포넌트에게 어떤 값을 넘겨주고 싶은 경우에는 props를 이용할 수 있습니다.props는 읽기 전용입니다.모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.App.jsHeader.js

App.jscounter.js하지만 버튼을 눌러도 따로 숫자값이 변하지 않고 있습니다.왜냐하면 함수컴포넌트는 단순 함수일 뿐이기 때문입니다. 함수는 어디선가 실행하는 경우 리턴문을 반환하고 종료가 되는 것입니다.컴포넌트가 상태를 관리한다는 것은 상태값을 변경할 수 있고

즉, 참조타입은 불변성을 가지도록 호출을 해줘야합니다.

React공식문서(https://ko.reactjs.org/docs/state-and-lifecycle.html직접 State를 수정하지 마세요State 업데이트는 비동기적일 수도 있습니다.multiplyBy2AndAddBy1를 실행하면 \*2+1이 아닌 그냥

이 컴포넌트가 렌더링되는 시간이 화면에 보여지기 때문에, 시간이 흘러도 화면은 멈춰있게 됩니다.그렇다면 이 setIntervel컴포넌트는 코드에 어느 부분에 넣어야할까요?현재 넣을 수 있는 부분은 위 위치밖에 없습니다. 하지만 이경우 컴포넌트가 setInterval함수

react공식문서초기화를 담당하는 부분해당하는 컴포넌트의 state는 보통 이부분에서 정의를 해줍니다.render()함수를 실행하면컴포넌트가 첫번째 렌더에 실행이 되는 것을 확인할 수 있습니다.위 라이프사이클을 고려하여 생각을 해본다면 render함수가 실행된 후 Re

중간미션

ref 기본 Ref와 DOM react공식문서 >Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. >Ref를 사용해야 할 때 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로

현재의 상태에서 FollowButton을 누르는 경우 Follow여부에 따라 Follow 와 following이 보이는 컴포넌트를 만들어보겠습니다.const \[following, setFollowing] = React.useState(false)following이라는

react 공식문서위와 같은 네이버 웹툰 페이지에서는 카드를 컴포넌트로 만들어 활용할 수 있습니다.그런데 이를 렌더링하는 경우위와 같이 각각의 컴포넌트에 하나씩 데이터를 넘겨주는 것은 너무 비효율적입니다. 이 때 Array.prototype.map을 활용하면 보다 효율

리액트 공식문서React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하지만 몇가지 차이점이 있습니다.React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다.JSX를 사용하여 문자열이 아닌 함수로 이

리액트공식문서ES6 클래스를 사용하여 컴포넌트를 정의할 때, 일반적인 패턴은 이벤트 핸들러를 클래스의 메서드로 만드는 것입니다. 미...미쳤다..!!

React공식문서-Form(https://ko.reactjs.org/docs/forms.html대부분 경우에 폼을 구현하는데 제어 컴포넌트를 사용하는 것이 좋습니다. 제어 컴포넌트에서 폼 데이터는 React 컴포넌트에서 다루어집니다. input, textare

react공식문서Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.그렇다면 일반적으로 어떤 경우 Ref를 사용할까요?Ref를 사용해야 할 때포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.ex) 결제페이지

리액트 공식문서의 예제를 보고 만들었습니다.OnlineStore.jsSearchBarStoreTable.js위와 같이 작성을 할 수도 있지만, API로 데이터를 받는 등 확장성을 고려해 작성해보도록 하겠습니다.

JSX에 인라인으로 스타일을 작성하는 것은 html에 인라인 스타일로 작성하는 것과 매우 유사합니다.JSX에서는 ""가 아니라 {}로 스타일로 적용을 합니다.React는 특정 숫자 인라인 스타일 프로퍼티는 “px” 접미사를 자동으로 추가합니다. 주의style 어트리뷰트

리액트는 Client Side Rendering 방식으로 동작하고, SPA를 만들 수 있도록 지원하는 라이브러리입니다.리액트 공식문서에서는 SPA에 대해 아래와 같이 설명을 하고 있습니다.싱글 페이지 애플리케이션(Single-page application, SPA)은

위 코드와 같이 forEach를 써서 순회하며 자식태그로 props를 보낼 수는 없다. forEach는 반환을 하지 않기 때문에 map을 사용해야한다.위와 같은 데이터를 카테고리별로 구분해 관리를 하고 싶은 경우, reduce를 이용할 수 있다.

컴포넌트에서 API 호출하기 1. fetch API fetch API는 브라우저에 내장되어 있는 웹API입니다. 따라서 별도의 다운로드 없이 fetch API를 사용할 수 있습니다.

Custom Hook이 api호출과 직접적으로 관련이 있는 것은 아니지만 우리가 데이터의 호출을 조금 더 효율적으로 하는 방법들을 이해하기 위해서는 먼저 선행적으로 Custom Hook에 대한 이해를 하고 넘어가는 것이 좋습니다.현재 자주 사용하고 있는 react ho

비동기로직을 쉽게 다루게 해주는 라이브러리입니다. 이 두가지 기술은 비교적 최근에 나온 라이브러리로 최근에는 해당 라이브러리로 교체하는 편입니다.그런데 단순히 비동기로직을 쉽게 다루기 위한 라이브러리라기 보다는 어플리케이션에서 상태를 어떻게 관리할 것인지에 대한 측면도

전역상태를 관리한다는 말은 어플리케이션에 어떤 컴포넌트에서도 이 전역적으로 관리되고 있는 상태 값에 접근해 사용할 수 있다는 것을 의미합니다.대표적으로 로그인한 유저 정보와 Theme style이 있습니다.만약 App에서 D로 데이터를 전달하기 위해서는 A, B, C에

리액트에서 자체적으로 제공하는 훅중에 하나입니다. 사실 전역 상태 관리보다는 상태관리에 조금 더 관련이 있습니다. 하지만 이 useReducer는 context API와 리덕스와 함께 사용을 하는 경우가 많기 때문에 개념을 잘 다져놓는 것이 좋습니다.useReducer

Redux는 리액트 어플리케이션을 만들 때 전역 상태 관리를 도와주는 라이브러리입니다. 지난 번 context API와 useState 또는 useReducer를 통해 전역 상태 관리를 할 수 있음 배웠습니다. 이것만으로도 전역상태관리를 할 수 있는데 왜 Redux를

커리큘럼사실은 하나의 HTML파일을 보여주고, 내부의 요소들은 모드 자바스크립트를 활용해서 변경시킵니다.페이지가 변경될 때마다 무조건 새롭게 html,css파일을 표시했어야했던 예전 방식보다 훨씬 효율적입니다.단점 : 초기렌더링 과정에 시간이 걸립니다.리액트는 가상으로

교안useref툴킷?컴포넌트가 표시되고 사라지는 순간까지를 하나의 생명 주기로 표현했습니다.Rendar phaseCommit phaseuseEffect는 렌더가 된 이후에 진행되는 과정입니다.mount(컴포넌트가 표시될때) => update(컴포넌트 내부요소 업데이트될

리액트 컴포넌트 react 의 component 는 함수형으로 작성하는 방식과, 클래스형으로 작성하는 방식이 있습니다. 함수형 예시 클래스형 예시 최근에는 함수형을 쓰는 것이 트렌드이고, 코드 자체도 클래스형을 쓸 때보다 훨씬 짧아지기에 함수형을 권장합니다.

윈도우 : ctrl + shift + p -> Open workspace settings (JSON)<p style={{ backgroundColor: 'blue' }} >잘가요!</p>과 같이 인라인으로 스타일을 지정할 수도 있지만 인라인은 우선순위로 다른

context API를 사용하면 A컴포넌트에서 C컴포넌트로 데이터를 내려보내기 위해 B컴포넌트에서 불필요한 props를 전달받고 내려보내야하는 과정을 없앨 수 있습니다.(데이터 전달과정에 발생할 수 있는 예기치 못한 문제를 방지할 수 있습니다.)components폴더

Reducer.jsWeatherprc.jsReudcerWeatherprc.jshttps://github.com/0seo8/weather_public_API

리덕스란 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리시스템useSateuseREducer리덕스 등등데이터가 벼견되어서 하나의 컴포넌트에 속하는 UI(ex) input창, togggle 버튼)useState로 관리를 하며 복잡한 로직이나 상태가 동시에 변경되는

CRA 공식문서 (https://create-react-app.dev/docs/importing-a-component루트경로에 jsconfing.json 파일을 생성해 아래와 같이 작성을 해준다.src/ 를 생략해서 사용을 할 수 있습니다.

리덕스란 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리시스템useSateuseREducer리덕스 등등데이터가 변경이 하나의 컴포넌트에 속하는 UI(ex) input창, togggle 버튼)useState로 관리를 하며 복잡한 로직이나 상태가 동시에 변경되는 위

최근 react-router-dom 버전 6로 업그레이드 되었습니다. 버전 6과 버전 5는 많은 차이가 있기 때문에 그부분에 있어서도 중점적으로 확인해보는 것을 권장드립니다.index.js공식문서에서는 routes 폴더를 만들어 그 안에서 컴포넌트를 만들어 사용하는 것

개발자들이 리덕스 툴킷을 쓰는 것을 권장하고 있지만, 현업에서 툴킷을 쓰느냐 묻는다면 또 그렇지는 않습니다. 결국 기본 리덕스에 대해 잘 이해하고 있어야합니다.useReducer과 비슷한 구조를 가지고 있습니다.상태관리 라이브러리가 많습니다.(recoil, Mobx,

Redux Toolkit(RTK)은 Redux 로직을 작성하기 위해 리덕스팀에서 공식적으로 추천하는 방법입니다. RTK는 Redux 앱을 만들기에 필수적으로 여기는 패키지와 함수들을 포함합니다. 대부분의 Redux 작업을 단순화하고, 흔한 실수를 방지하며, Redux

프로그래밍에서 비동기 처리와 전역상태관리는 굉장히 중요합니다. 또한 그만큼 어렵습니다.로그인한 유저 정보를 전역상태로 관리를 해야하는 경우를 예시로 본다면 로그인요청 - 서버 응답- 응답 받은 정보를 전역상태관리와 같은 순서로 진행되게 됩니다.현재 서버응답까지는 비동기

리덕스에서 사용되는 duck패턴 요소가 오히려 전체적인 코드량을 증가시킨다는 이슈에서 시작되었으며, 이를 해결하기 위해 리덕스팀이 만든 것이 바로 리덕스 툴킷이다.리덕스 툴킷의 경우 duck패턴에 비해 코드량은 줄어들었으며 사용은 오히려 더 복잡하지 않게 사용을 할 수

json server는 간단하게 백엔드 서버를 구축할 수 있도록 도와줍니다.최상단 db.jsonpackage.json이제 localhose:8000/posts로 접근해 배열 안에 있는 내용들을 CRUD할 수 있습니다.jwt 는 json web token 을 줄인 말로,

그동안 CRA를 통해 리액트 프로젝트를 사용하다가, 조금 더 빠른 vite를 이용해 프로젝트를 만들기 시작하며 배우게 된 CRA에서의 env 및 proxy설정과 vite에서의 proxy설정을 비교 정리해봅니다.CRA에서는 루트경로에 .env파일을 만들어 REACT_AP

RTK Query공식문서에 의하면 RTK Qurey는 다음과 같은 기능을 수행합니다.RTK Query는 강력한 data fetching, caching 툴입니다. 웹 애플리케이션에서 데이터를 가져오는 단순한 상황을 간단하게 만들어서 data fetching과 cach

리액트 스타일컴포넌트에서 ThemeProvider를 이용한 2가지 미디어 쿼리 적용 방법에는 크게 두가지가 있습니다.MediaQuery 속성을 모듈화 하기.MediaQuery 자체를 모듈화 하기.첫 번째 방법은 미디어 쿼리 문법 자체를 모듈화 했기 때문에 @media만

먼저 svgr를 설치해 준 다음, vite.config.js에 다음과 같이 작성해 줍니다.vite.config.js다음과 같이 세팅을 완료하면,export default App;다음과 같이 { ReactComponent as DeleteIcon } 를 통해 바로 Rea

React.js는 라이브러리를 표방React공식 홈페이지에서도 A JavaScript library for building user interfaces라는 설명을 확인할 수 있습니다.=> 정리하면리액트의 경우 개발자가 상태를 어떻게 관리를 하고 싶은지에 대한 주도권을

Next.js는 모든 페이지를 기본적으로 미리 그려놓습니다.(pre-render)처음 클라이언트 쪽에서 HTML을 로드를 할 때, 이미 많은 부분이 그려져 있는 상태로 로드를 하게 됩니다.이후 js번들이 로드되면, 그제서야 Hydration이라는 과정을 거쳐서 사용자와