리액트 공부중 - 2~3주차 후기

회사업무차에서

 

실시간 차트 개발을 담당하게 되어 리액트를 공부하고 있다.

 

리액트는 벨로퍼트의 블로그에서 쉽게 쫓아갈 수 있었으며, 역시 직접 따라 코딩해봐야 이해가 빠르게 된다.

 

리액트가 어렵다면 어렵다고 할 수 있는 이유는, 사실 기존의 html보다 훨씬 편하지만,

 

편하게 하기위하여 리액트 특유의 문법이 존재한다.

 

리액트에는 state가 존재한다. state를 직접적으로 변경할 수 없으며, 아예 새로운 객체를 만들어서 바꿔치기는 할 수 있다.

 

useEffect와 같은 특수문법이 존재한다. 렌더링이 완료되면 최초 실행되며, [deps]에 있는 값이 비어있으면, 더 이상 실행되지 않는다. 만약 [deps]에 특정값이 있다면, 해당값을 구독하여 값이 변경될때마다 호출된다.

 

context라는 것이 존재한다. singleton 또는 글로벌 변수라고 보면 될 것 같다. 

 

useReducer 사용자 정의의 state정도로 보면 될 것 같다.

 

함수를 인자에 넣어서 전달할 수 있다.( js특유의 문법으로 보인다.)

 

백엔드와 통신할때, axios,  promise가 사용된다.

 

주기적으로 실행되는 setInterval 같은 것은 사용하기 어렵다.

 

 

https://overreacted.io/making-setinterval-declarative-with-react-hooks/

Making setInterval Declarative with React Hooks

 

여기의 useInterval을 사용하고 있다.

 

 

그래프를 그리고 위한 차트 라이브러리는 recharts를 사용하고 있다.

 

apexChart보다 훨씬훨씬훨씬 가독성이 좋고, 사용하기 편하다.

 

실시간 차트(렌더링 없이 최신값을 채워주는)는 공식적으로 지원하지않지만, state를 data로 하여, state를 변경해주면 실시간 차트처럼 사용할 수 있다.

 

기타 등등은 vlpt의 블로그를 참조.. (매우 설명이 잘되어 있음)