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

React SPA 학습 목표 * SPA(Single-Page Application)의 개념 * SPA의 장, 단점 * 와이어프레임을 보고 컴포넌트 구분하기SPA(Single-Page Application) SPA의 등장 배경, 개념, 장단점 SPA의 등장 배경과 개념 전통적인 웹사이트에서는 사용자가 웹사이트 내 다른 페이지 이동시 브라우저가 매번 “페이지 전체”를 불러옴 → 페이지 전체를 불러오는 행위: 깜빡인다 → 중복되는 요소들도 매번 로딩해서 불필요한 트래픽 발생시키고 느리게 함 → 웹사이트가 복잡해지고 애플리케이션 형태로 되며 사용자와 서비스 사이의 상호작용이 증가하며 이 방식의 한계점 SPA의 경우 Menu, Footer와 같이 페이지 전환 후 중복되는 부분은 새로 로딩하지 않는다 → 업데이트가..

React – 기초 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리 → 웹, 데스크탑, 모바일 등 다양한 플랫폼에서 활용 가능 → 컴포넌트 단위로 나눠서 개발함 React의 3가지 특징 선언형 컴포넌트 기반 범용성 선언형(Declarative)(명시적) 코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있게 하는 것(직관적) → 리액트는 한 페이지를 보여주기 위해 html/css/js로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 jsx를 활용한 선언형 프로그래밍을 지향! 컴포넌트 기반(Component-Based) 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 함 → 컴포넌트로 분리하면 상호 독립적/재사용 가능 → 기능 자체에 집중..