Daily Log

Reducer - 변수의 개념, INIT_STATE - ex. JoinAgreeCustomer / RegisterCustomerInfo - reducer 정의 시 action에 정의된 type 필요 Actions - Reducer에 있는 init_state 변경 - ex. SaveJoinAgreeCustomer / UpdateRegisterCustomerInfo Dispatch - Container에서 Action 호출하여 Reducer값 변경! - action.js 에 정의해놓은 필요한 액션을 import 해와야 함 - dispatch할 때 이 action을 사용하여 reducer의 값을 변경함 - 호출되어 변경될 때마다 Reducer는 Redering됨 => 이때, 새로운 값으로 새로 만들어 지는 것..

forEach: 배열의 모든 원소에 콜백함수를 1회 실행하고 종료 map: 배열의 모든원소에 콜백함수를 1회 실행하고 새로운 배열 리턴해주고 싶을 때 사용 map은 return 값이 반드시 있음 아래는 habits 라는 배열을 map으로 돌고 하나하나있는 원소의 객체의 id, name, count를 props를 통해 Habit 컴포넌트에 넘기는 과정이다. habits.jsx import React, { Component } from 'react'; import Habit from './habit'; class Habits extends Component { state = { habits: [ { id: 1, name: 'Reading', count: 0 }, { id: 2, name: 'Running',..

리액트에서 State가 업데이트 될 때면 반드시 내장함수인 setState를 통해서 업데이트 시켜야한다. -> 그냥 state에 있는 변수를 바꿔버리면 안됨. state를 전체적으로 업데이트를 해줘야하는데 그것이 바로 setState! => setState를 써야 리액트가 "아~스테이트가 변경되었구나 렌더함수를 다시 호출하자! 라는 식으로 진행이 됨. class Habit extends Component { state = { count: 0, }; // 아래는 콜백함수 addCountNumber = () => { this.setState({ count: this.state.count+1 }) }; render() { return ( ) } . . . . . } subtractNumber = () => {..

크롬 개발자 도구로 react관련 앱 다운받으면 component로 해당 사이트에서 구성하는 컴포넌트들을 확인할 수 있다. 컴포넌트 표시가 안되는 부분은 순수 자바스크립트임 - state는 그 컴포넌트에서 가진 데이터 - props는 부모로부터 받아온 데이터가 props JSX - 분명 자바스크립트 코드인데 html과 비슷한 코드가 쓰여지는 중 app.jsx import React from 'react'; import './app.css'; function App() { return Hello :) } export default App; 자바스크립트 코드위에서 간단하게 html처럼 쓸 수 있게 만들어진게 jsx html class / onclick / 마크업언어 jsx className / onClick..

컴포넌트 클래스 / 함수 state라는 오브젝터가 들어있음 -> state가 변경되면 render함수가 호출됨 -> DOM TREE에 올라갔을때, 나왔을때 등 컴포넌트의 상태에 따라 함수를 구현해주면 알아서 해주는 라이프사이클 메소드가 있음 function: 간단한 함수로 만들 수 있다. 컴포넌트 데이터가 정적이면 function -> 함수는 한가지의 기능을 수행하는 단위라서.. state나 라이프사이클메소드가 없음. -> BUT, react 16.8 부터는 리액트훅이 생김. 그럼 function에서도 state, lifecyclemethod 다 가능 -> 왜 굳이 리액트 훅이 도입되었나? 기존 클래스컴포넌트에서 할 수 있는 것처럼 동일한 기능이 가능하도록 됨 그럼 왜 생김? class가 어렵다. 클래스..

node 설치(npm같이 있음) homebrew 설치 yarn 설치 homebrew로 가능 폴더에서 아래 명령어 실행시 package.json 등 패키지 매니저 등 프로젝트에 필요한 환경이 셋팅됨 -> 개인프로젝트할 때 create react-app [폴더명] 추천 yarn create react-app my-app 명령어 -> start 시작 yarn start --Starts the development server. yarn build --Bundles the app into static files for production. yarn test --Starts the test runner. yarn eject --Removes this tool and copies build dependencies,..