React 얕 이해는 단순한 확엕이 아니라, 언제 리렌더링이 일어나는지, 음 두는 훅은 무엇인지를 이해하는 데 있습니다.
useState는 값이 내부적으로 변경되어도 React가 알아내게 하는 영구적 저장소입니다.
const [selectedSensor, setSelectedSensor] = useState("ph");
// ↑ 현재 값 ↑ setter 함수 (= 호출하면 리렌더링 트리거)
리렌더링 조건: setter를 호출하면 이전 값과 다를 때만 React이 컴포넌트를 다시 그립니다.
// App.jsx
// UI 인터랙션 상태
const [selectedSensor, setSelectedSensor] = useState("ph"); // 콴얼로 선택된 센서
const [selectedStage, setSelectedStage] = useState("aeration"); // 클릭된 코정
// HRT 슬라이더 값
const [hrtRatios, setHrtRatios] = useState({
primary_settling: 1.0,
aeration: 1.0,
secondary_settling: 1.0,
nitrification: 1.0,
disinfection: 1.0,
});
// 파이프라인 계산 결과
const [pipelineResult, setPipelineResult] = useState(null);
| 상태 | 트리거 | 연쇄 효과 |
|---|---|---|
selectedSensor 변경 |
센서 카드 클릭 | HistoryChart 장르 변경 |
selectedStage 변경 |
SVG 공정도 클릭 | WaterQualityComparison 세부정보 변경 |
hrtRatios 변경 |
슬라이더 조작 | API 호출 → pipelineResult 업데이트 |
useEffect(() => {
// 실행할 코드
return () => {
// 클린업 (cleanup): 컴포넌트 제거 또는 의존성 변경 시 실행
};
}, [dep1, dep2]); // 의존성 배열: dep이 내재할 때 재실행
의존성 배열 규칙:
[] — 컴포넌트 마운트 1회만 실행[sensor] — sensor 풀륌마다 재실행// App.jsx - 폴링된 데이터를 pipelineResult에 대루는 로직
useEffect(() => {
// HRT 조작이 없었으면 (슬라이더 미조작) 폴링 결과를 입력
if (!pipelineResult && polledPipeline) {
setPipelineResult(polledPipeline);
}
}, [polledPipeline]);