당 떨어질 땐 초코딩

props (properties) : 컴포넌트 속성을 설정할 때 사용 - 부모 컴포넌트가 자식 컴포넌트에 주는 값 - 값을 받아오기만 할 뿐, 수정 불가 - MyComponent.js import React, {Component} from 'react'; class MyComponent extends Component { render(){ return ( 안녕하세요 제 이름은 {this.props.name} 입니다. ) } } export default MyComponent; - App.js import React, { Component } from 'react'; import MyComponent from './MyComponent'; class App extends Component { render(..

JSX : 자바스크립트 확장 문법 1 2 3 4 5 6 7 8 9 10 11 12 13 import React, { Component } from 'react'; class App extends Component { render() { return ( ); } } export default App; cs - 위와 같이 작성한 코드는 babel-loader를 사용하여 자바스크립트로 변환함 장점 - 보기 쉽고 익숙함 -> HTML 코드와 비슷함 기본 문법 1. 컴포넌트에 여러 요소가 있다면, 무조건 부모 요소 하나로 감싸야 함 1 2 3 4 5 6 7 8 9 10 11 12 13 14 class App extends Component { render() { return ( Hello React! Welcom..

Redux - 상태 관리의 로직을 컴포넌트 밖에서 처리 - 목표 : 플럭스를 기반으로 애플리케이션 안에서 변경된 데이터가 어떻게 흘러가는지 더 명확히 표현하도록 해줌 - 디스패처를 없애고 애플리케이션 상태를 불변 객체 하나로 표현함으로써 플럭스의 개념을 더 단순화함 - 모든 상태 데이터를 한 객체에 모으게 함으로써 애플리케이션에서 상태를 보는 관점을 단순하게 유지 ARS 순서로 실행 Action : 객체 형태로 되어 있고, 상태를 변화시킬 때 참조하여 변화를 일으킴 - 상태를 바꿀 때는 객체 전체를 바꿔치기 하는 방식을 사용하는데, 바꿀 대상을 지정해줌 - 애플리케이션 상태 중에서 어떤 부분을 바꿀지 지시하고 그런 변경에 필요한 데이터 제공 - event가 하는 일이랑 똑같다고 봐도 됨 ex) 버튼에서 ..

React : 사용자 인터페이스를 개발하기 위한 자바스크립트 라이브러리 - 컴포넌트 기반 #컴포넌트 : 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여줌 - DOM 관리와 상태값 업데이트 관리를 최소한으로 하고, 오직 기능 개발과 사용자 인터페이스 개발에 집중할 수 있도록 도와줌 1. node.js 설치 2. CRA(Create React App) 설치 1 npm install -g create-react-app cs 3. 파일 경로 설정 후, App 생성 1 create-react-app 앱 이름 cs 4. 서버 돌리기 1 npm start cs 위의 사진처럼 http://localhost:3000/ 이 뜨면 성공!