서론React에서 타이머(setTimeout)를 이용하여 일정 시간 후에 특정 함수를 호출하는 기능을 구현하던 중,함수 내부에서 참조하는 상태(state)가 최신값이 아닌 과거 값으로 작동하는 문제가 발생했다. 문제 원인을 체크해보니 React의 비동기 렌더링 이슈가 아닌 자바스크립트의 클로저(Closure)의 특징으로 발생한 것이라는 걸 알게 되었다.문제 상황const goToMaintainPage = () => { // 작업 상태값을 저장하고 다음 페이지로 이동// mySwrState : 생성한 커스텀 useSWR 임 setMySwrState({ ...mySwrState, director: directorName, // useState 값(생성했다고 가정) workerNumber:..

리액트 - 데이터 흐름 이해와 비동기 요청 처리 보충 내용 리액트의 핵심 키워드 및 주요 용법 1. 컴포넌트 기반 2. 단방향 데이터 흐름 3. lifting state up(상태 끌어올리기) 4. side effect 방지를 위해 → useEffect (최소한으로 쓸 것) 개발자는 절차적으로 코드를 작성해야 하는데, 개발자도 유저가 생각하는 방식으로 심플하게 생각할 수 없을까? → 절차적으로 코드는 짜되, 다 작성하고 나면 이런식으로 사용하게 생각해보자 → 리액트 리액트로 사고하기: https://ko.reactjs.org/docs/thinking-in-react.html 를 항상 생각해서 하자!(항상 참고!) 함부로 상태 변경이나 외부 side effect 받지 않게 하자 → 하향식, 단방향 데이터 ..

react 데이터 흐름 react에서의 데이터 흐름 컴포넌트로 생각하기 react의 개발 방식의 가장 큰 특징인 컴포넌트 단위(페이지 단위x)로 시작한다는 점을 다시 떠올려 보자 → 페이지를 만들기 이전에, 컴포넌트를 먼저 만들고 조립(상향식으로 앱을 만듬) → 테스트가 쉽고, 확장성이 좋음 단일 책임 원칙: 하나의 컴포넌트는 한가지 일을 처리하는 게 이상적이다 데이터는 위에서 아래로 흐른다(데이터 흐름은 하향식) 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달 받을 수 있다 → 데이터를 전달하는 주체: 부모 컴포넌트 → 부모 컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있다 부모가 자식에게 데이터를..

React State & Props 학습 목표 * state, props의 개념 * React 함수 컴포넌트(React Function Component)에서 state hook을 이용한 state 정의 및 변경 * React 컴포넌트에 props 전달 * 이벤트 핸들러 함수 생성 및 사용 * 실제 웹 애플리케이션의 컴포넌트 분석하기 * 개발시 state와 props의 위치 정하기 * React의 단방향 데이터 흐름(One-way data flow)에 대한 이해 State & Props Intro Props vs. State(상태) props는 외부로부터 전달 받은 값 state는 내부에서 변화하는 값(컴포넌트 안에서만 지지고 볶고) Props & State 구분하기 예제 Props // 불변 하는 값 ..