학원에서 배운 것/React15 KDT 5th 웹개발자 입문 수업 44일차 MBTI 구현 마저하기 Check 액션 생성 함수 삽입 mbti 조사 결과 값을 만들어주기 위해 선택한 값을 바탕으로 Action 시켜준다. export function check(result) { return { type: CHECK, payload: { result }, }; } export default function mbti(state = initState, action) { switch (action.type) { case CHECK: return { ...state, mbtiResult: state.mbtiResult + action.payload.result, }; case NEXT: return { ...state, page: state.page + 1, }; case RESET: ret.. 2023. 4. 6. KDT 5th 웹개발자 입문 수업 43일차 - 2 프로젝트 시작 시 기초 구조 구현하기 1. npx create-react-app 프로젝트명 2. npm i -D prettier eslint 3. npx eslint --init 4. .vscode 폴더 > settings.json 5. 폴더 최상단 > .prettierrc, .eslintrc.js 6. npm i -S @reduxjs/toolkit react-redux 7. npm i -S styled-components 8. npm i -S react-router-dom MBTI 심리테스트 구현 리액트 SPA 제작 Styled Components 활용 - Global Style / Component Redux 활용, 조건부 렌더링 기초 세팅 1. 필요 모듈 설치 npm i -S @reduxjs/too.. 2023. 4. 5. KDT 5th 웹개발자 입문 수업 43일차 - 1 Todo List 마저 구현하기 리듀서의 DONE 동작 구현 list 이외의 초기 state 값은 그대로 전달 되어야 하므로 전개 연산자를 꼭 사용해줘야 한다. 컴포넌트에서 전달 받은 id 값과 동일한 객체를 찾은 다음, 해당 객체의 done 항목을 true 로 변경해준다. 배열의 map() 메서드는 배열의 모든 값을 순회하면서 배열의 값을 return 된 값으로 변경해주기에 해당 메서드를 사용해준다. //reducer export default function todo(state = initState, action) { switch (action.type) { case CREATE: return { ...state, todoList: [ ...state.todoList, { id: action.payl.. 2023. 4. 5. KDT 5th 웹개발자 입문 수업 42일차 Redux 상태 관리 라이브러리 - 상태 관리가 필요한 다른 프레임워크에서도 사용 가능(jQuery, Vue.js, Angular.js ...) Redux의 개념을 각각의 프레임워크에 맞춘 라이브러리 사용 -> React-Redux 컴포넌트의 상태를 하나하나의 props 로 전달하면 힘들기에 이를 해결하기 위해 나온 라이브러리 즉, 컴포넌트의 상태를 각각 컴포넌트별 state 에 따라 관리하는 것이 아닌 하나의 store 라는 곳에서 관리한다. ✨ 상태 변화 값을 중첩된 컴포넌트 수 만큼 Props 로 전달하는 방식이 아니라 Store 에서 한번에 꺼내서 사용하는 편리함을 제공한다. Redux 의 기본 개념 Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다 (스토어라.. 2023. 4. 4. 이전 1 2 3 4 다음
