React

React란 ? React는 SPA (Single Page Application) 즉, 단일 페이지 응용 프로그램에서 사용자 인터페이스를 구성는데 사용되는 오픈 소스 프론트엔드 JS 라이브러리 입니다. React UI 컴포넌트 라이브러리다. _ 리액트 살펴보기 - React는 선언적이며, 뷰 또는 UI레이어의 역할만 한다. - React는 Rea...

리액트 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 나뉩니다. 기존의 개발방식은 일반적으로 함수형 컴포넌트를 사용하고 state이나 Life Cycle method필요로 할 때에만 클래스형 컴포넌트를 사용하는 방식이었습니다. 언제 클래스 컴포넌트를 사용하고 언제 Functional 컴포넌트를 사용할까요? >Component 에서 state 또는 li...

여러개의 input 상태 관리하기 리액트 상태에서 객체를 수정할 때는 직접적으로 수정하면 안된다. 새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이를 상태로 사용해주어야 합니다. 불변성을 지켜야지 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 할 수 있다.

todo 혼자 찾아보면 만들어보기 ~!목표 리덕스 적용하여 상태관리 리덕스 사가 붙이기궁금점리액트 contextAPI는 컨포넌트의 통합 데이터를 관리하는 경우,리덕스는 서버에서 가져온 데이터로 새로운 결과물을 만드는 경우라고 하지만 잘모르겠다 !useCallback 어

이벤트를 사용할 때 주의사항 이벤트 이름은 카멜 표기법으로 작성한다. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌, 함수 형태의 값으로 전달한다. DOM 요소에서만 이벤트를 설정할 수 있다. div, button, input, form 등의 DOM요소에서는

useCallback - React Hooks: 메모이제이션 훅, 함수로 인한 렌더링 성능을 최적화하는 용도로 사용됩니다함수를 캐싱(또는 메모이제이션)할 때 사용하는 훅입니다.메모이제이션이란 계산된 값을 자료구조에 저장하고 이후 같은 계산을 반복하지 않고 자료구조에서

컴포넌트 안에서 우리가 정의한 컴포넌트의 state 오브젝트 입니다.컴포넌트 UI를 위한 데이터를 보관하는 오브젝트로, 이 state라는 오브젝트를 통해서 데이터에 업데이트가 발생하면 리액트가 자동적으로 우리가 구현한 render 함수를 호출하죠. 컴포넌트 밖에서 주어

브라우저 ↔️ 프론트서버(SPA React) /브라우저 → 백엔드 서버 ↔️ 데이터 베이스 html 다운로드 → js 다운로드 → js 실행 → 서버에서 api 호출 → api결과 데이터 바인딩 → 화면 렌더링 Client Side Rendering 약자로 자바스

axios를 이용하여 서버와 프론트에서 데이터를 주고 받는데 get이나 put을 이용하면 body로 request를 받아올수 있다 delete는 못받온다?? 왜일까 검색을 해보았지만 답을 찾지 못했지만 해결방안을 알았다. ㅠㅠ delete 두 번째 인자에 data

라우팅이란? 네트워크상에서 주소를 이용, 목적지까지 경로를 체계적으로 결정하는 경로선택 과정리액트 라우터는 리액트의 화면 전환을 도와주는 역할을 한다. 일반적인 웹에서 a태그를 이용해 다른 페이지로 이동했었다. 리액트에서는 React-Router 를 통해 Link 태그

componentWillMount, componentWillReceiveProps, componentWillUpdate 17부터 사용불가componentWillReceiveProps => getDerivedStateFromPropscomponentWillUpdate 

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.상태를 효율적으로 관리할 수 있게 도와주는 도구Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다.Redu

MobX는 전역 상태 관리 라이브러리다. 모든 상태변화를 일어나는 부분을 자동 추적해주는 역할을 한다. Redux와 주로 비교 되고는 한다.React에 종속적인 라이브러리가 아님아키텍처나 상태 컨테이너가 아닌 라이브러리redux와 다르게 store에 제한이 없음또한 r

import Highcharts from "highcharts/highstock"; import HighchartsReact from "highcharts-react-official";optionsxAxis - X축 드래그 이벤트 mobx를 통하여 상태관리를 하였습니