사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다.Virtual DOM을 사용하여 실제 DOM 업데이트의 성능 비용을 줄인다는 점이다.Virtual DOM : 새로운 요소가 화면에 추가되면 트리로 표현되는 가상 DOM이 생성되고, 이전과 바뀐 것만 검색
ReactElement를 정의하는 간편한 방법으로 JSX 문법을 제공한다. 자바스크립트를 확장한 문법으로 ReactElement를 xml 문법 형식으로 정의할 수 있는 방법이다.JSX는 공식적인 자바스크립트 문법이 아니어서 바벨이라는 트랜스 컴파일링 툴이 필요하다.바벨
이 안에 들어가는 모든 엘리먼트를 ReactDOM에서 관리하기 때문에 이것을 Root DOM node라고 부른다. 일반적으로 React로 구현된 애플리케이션은 하나의 루트 돔 노드가 있다.단, 리액트를 기존 앱에 통합하려는 경우에는 원하는 만큼의 독립된 루트 돔 노드를
클래스형 컴포넌트ES6에서 제공되는 클래스 문법을 이용해 랜더링될 컴포넌트를 정의하는 방법을 제공한다.render() 함수는 반드시 작성되어야하며 반환 값으로는 랜더링될 리액트 엘리먼트를 정의한다.(일반적으로 JSX를 사용한다.)중복되는 엘리먼트를 추상화해서 컴포넌트로
propsproperties의 약어로, 컴포넌트의 속성을 설정할 때 사용하는 요소이다.props값은 해당 컴포넌트를 사용하는 부모 컴포넌트에서 설정할 수 있다.props는 읽기 전용이기 때문에 수정해서는 안된다."모든 React 컴포넌트는 자신의 props를 다룰 때
state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.state : 컴포넌트 내부에서 설정되는 값, 변경되는 값 관리props : 부모 컴포넌트가 설정하는 값, 읽기 전용으로 사용클래스형 컴포넌트에서는 state를 직접 사용할 수 있다.함수형 컴포넌트에서는 use
event event-system 리액트의 이벤트 시스템 웹 브라우저 HTML 이벤트와 인터페이스가 동일하기 때문에 사용 방법이 유사하다. 유의사항 이벤트 속성의 이름은 카멜 표기법으로 작성 (onclick -> onClick) 이벤트에 실행할 자바스크립트의
컴포넌트의 라이프 사이클생명주기 도표 : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/라이프 사이클은 총 3가지 카테고리마운트 : DOM이 생성 되고 웹 브라우저상에 나타나는 것업데이트 : 컴포
iteration 01_key 배열 등을 이용하여 반복적인 컴포넌트 랜더링 하는 방법 key : 리액트에서 key는 컴포넌트 배열 랜더링 시 어떤 요소에 변동이 있는지 알아보기 위한 식별자의 역할을 한다. key가 존재하지 않을 때는 가상돔과 원본돔 비교 과정에서
useEffect 01_useEffect-basic Hooks : 함수 집합을 의미 함수 컴포넌트에서 생명주기 메소드 사용이 불가하기 때문에 상태 관리 및 랜더링 이후 시점 컨트롤 등 다양한 문제를 해결하기 위해 만들어졌다. (리액트 16.8에서 새로 도입된 기능)
useReducer : 다양한 컴포넌트의 state를 업데이트 할 때 사용하는 Hook 장점 : 컴포넌트 업데이트 로직을 컴포넌트 밖으로 분리할 수 있다. (재사용 가능)리듀서는 새로운 상태를 만들 때 반드시 불변성을 지켜주어야 한다. (기존 state의 값을 변경하는
시간과 비용이 드는 계산과 간단한 계산이 있다.(hardCalculator와 easyCalculrator)간단한 연산을 수행해서 state가 바뀔 때 다시 화면을 랜더링하기 위해 해당 App함수를 다시 호출하기 때문에 hardCalculator와 easyCalculra
함수 생성이 불필요하게 계속 될 때 useCallback을 이용하여 함수를 memorization 해서 사용할 수 있다.useReducer와의 차이점 : useReducer는 컴포넌트 업데이트 로직, useCallback은 함수
useRef 01_local-var-useref useRef 참조할 객체를 만든다. 지역 변수(랜더링과 무관하게 변경 될 수 있는 값) 사용 시 useRef의 활용 02_inputref 특정 input에 포커스를 주고싶을 경우 DOM에 접근해야하는데 이를 위해서도
컴포넌트 합성을 통해 트리 구조가 복잡해질수록 하위 컴포넌트로 props를 전달하기 위해 drilling이 발생할 수 있게되고, 이때 유지보수 및 코드 읽기가 어려워지는 문제가 있다.context는 React 컴포넌트 트리 안에 전역적으로 데이터를 공유할 수 있도록 고
여러 컴포넌트에서 비슷한 기능을 공유할 경우, 사용자 정의 custom hook을 작성하여 로직을 재사용 할 수 있다.반복되는 로직custom hook으로 변경 return 반복되는 로직return custom hook으로 변경value={ username.value
동기 작업과 비동기 작업동기 작업 : 하나의 작업을 실행하고 마친 뒤에 다음 작업을 순차적으로 실행함비동기 작업 : 메인 흐름은 멈추지 않는 상태에서 특정 작업들을 백그라운드에서 처리하여 동시에 처리하는 것처럼 실행함 비동기 작업을 할 때 가장 많이 사용하는 방식이 콜
async - api 01_fetch-async-await fetch api 사용법 const promise = fetch(url, [options]); url : 접근하고자하는 url options : 선택 매개변수로 method나 header등을 지정. opti
data-component 03_data-component 페이지를 로드 하자마자 데이터를 보여줘야하는 상황이라면 useEffect()에서 호출하고 두 번째 인자로는 빈 배열을 전달한다. 그러면 최초 랜더링 시 데이터를 로드할 수 있다. 어떠한 동작에 의해서 데이터
React Application 개발을 위해서는 Babel, Webpack(웹 애플리케이션 자원 번들링) 등의 환경이 필요하다.React에서 주로 많이 사용하는 도구 및 설정을 포함하고 있는 Create React App을 사용하면 복잡한 설정 없이한 번에 React
앱을 만들고싶은 경로에서 하단 코드로 새로운 app을 만든다.경로 이동 시./ : 동일한 경로../ : 상위경로로 이동./ : app 이름을 해당 경로의 이름과 동일하게 설정한다.App.js 파일에 랜더링할 파일들을 작성해준다.path : 경로설정( 루트로 연결 시 M
redux : 상태 관리를 하기 위한 라이브러리앱의 상태 전부는 하나의 저장소(store) 안에 있는 객체 트리에 저장된다.상태 트리를 변경하는 유일한 방법은 어떤 행동이 일어날지에 해당하는 action이다.action에 따라 상태를 어떻게 변경할지 명시하기 위한 함수
ReactRedux react redux 같이 쓰기 위한 스크립트 사용할 기능 꺼내오기 state를 변경하기 위한 리듀서 함수의 정의 action은 dispatch를 호출하는 쪽에서 전달해주는 객체로 행위의 종류(type)와 state 변경에 대한 내용(payl
관리 대상 state가 복잡하거나 reducer 함수로 관리해야할 성격이 다른 경우 combine reducer를 이용할 수 있다.여러 리듀서 함수를 하나의 rootReducer로 묶을 때 combineReducers를 이용한다. 서로 관련있는 상태 변경에 대한 로직을
Ducks 패턴에 의하면 초기값, 액션, 리듀서를 관련 있는 state 별로 modules 폴더에 만들어 관리한다.초기 값액션액션을 함수 형태로 재사용할 수 있도록 작성하여 dispatch 호출 시 인자로 전달할 값을 반환하는 함수를 만들어둔다.함수의 리턴 값은 ret
액션에 해당하는 내용을 매번 함수로 정의하기는 번거롭기 때문에 redux-actions 모듈 기능인 createAction, createActions를 이용해 보다 쉽게 액션 함수를 생성할 수 있다. 초기값액션createAction 사용첫번재 인자로 전달되는 문자열은
리덕스 미들웨어 dispatch(action) --- > middleware --- > reducer(state, action) --- > store 저장액션이 디스패치 된 다음 리듀서에서 액션을 받아 업데이트 하기전에 추가적인 작업을 미들웨어를 통해 수행할 수 있다.