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

노마드코더 사이트: ReactJS로 영화 웹 서비스 만들기 강의를 통한 보충 학습 2 function 컴포넌트 -> class 컴포넌트로 바꿔서 작성 why? 편한 function 컴포넌트 나두고 class 컴포넌트라는 걸 씀? -> class 컴포넌트가 가진 state를 활용하기 위함이다 state는 객체(Object) : 컴포넌트의 데이터(가변적)를 넣는 공간이라 보면 된다 class 컴포넌트는 return 을 바로 갖지 못한다 대신 render 함수를 사용해서 활용 리액트는 자동적으로 모든 class 컴포넌트의 render 함수를 실행한다 //기존의 function 컴포넌트 -> class 컴포넌트로 전환해서 작성 class App extends React.Component{ // React cla..

노마드코더 사이트: ReactJS로 영화 웹 서비스 만들기 강의를 통한 보충 학습 * 부모/자식 컴포넌트 * map 메소드를 활용한 동적인 컴포넌트 처리 * props 가 동작하는 과정 * props 에 대한 검증 방법 * 전체 코드 내용 정리(현재까지의 App 컴포넌트) 부모/자식 컴포넌트 부모 컴포넌트인 App 에서 자식 컴포넌트인 Food 에 props를 전달 부모 컴포넌트에서 자식 컴포넌트를 호출?하면서 전달할 props를 설정해 준다 function App() { return ( {foodILike.map(eachFood => { //부모 컴포넌트인 App 에서 자식 컴포넌트인 Food에 props를 전달 return //동적으로 작동하도록 map 메서드를 사용 // Food에 name, pic..

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 // 불변 하는 값 ..