리액트 - 데이터 흐름 이해와 비동기 요청 처리 보충 내용 리액트의 핵심 키워드 및 주요 용법 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 // 불변 하는 값 ..