본문 바로가기

react39

[TIL] 내일배움캠프 React 과정 2022.12.13 Today I Learned React 숙련 개인 과제 시작 Redux로 TO DO LIST 구현하기 시작부터 에러 메시지: could not find react-redux context value Uncaught Error: could not find react-redux context value; please ensure the component is wrapped in a 라는 에러 메시지가 뜨면서 useSlector 이용해서 state를 불러오는 데 실패하고 있다. // 추가할 코드 import store from "./redux/config/configStore"; import { Provider } from "react-redux"; const root = ReactDOM.createRoot(.. 2022. 12. 14.
[TIL] 내일배움캠프 React 과정 2022.12.12_react-router-dom Today I Learned React 숙련 강의 수강 Redux 특강 복습 React 숙련 강의 react-router-dom이란? 페이지 이동을 구현할 수 있게 해주는 패키지. react-router-dom을 이용하면 SPA 기반인 리액트 프로젝트 안에서 여러 개의 페이지를 구현할 수 있다. 사용방법 순서 페이지 컴포넌트 생성 Router.js 생성 및 router 설정 코드 작성 App.js에 import 및 적용 페이지 이동 테스트 react-router-dom 사용하기 페이지 컴포넌트 생성 pages 폴더를 만들어서 다음과 같이 컴포넌트를 생성한다. Router.js 생성 및 route 설정 코드 작성 // src /shared/Router.js // 1. react-router-dom을 사용하.. 2022. 12. 12.
[WIL] 내일배움캠프 여섯째 주_React 공부 시작! 이번 주부터 드디어 리액트 공부를 시작했다. 아직 리액트를 공부한 지 일주일밖에 안 됐다는 게 놀랍기도 하다. 벌써 2주는 지난 거 같은 기분이라서ㅋㅋ 그래도 짧은 시간 안에 리액트와 많이 친해진 거 같다. 처음에 입문 강의 들을 때는 props가 뭐고 state가 뭔지 개념이 이해가 잘 안 됐었는데 개인 과제 수행하면서 구조와 흐름이 처음보다는 이해가 잘 되는 거 같다. 리액트 입문 개인 과제 -> To Do List 만들기 https://github.com/heegeer/React/tree/main/TO-DO-LIST 나름 폰트도 적용하고 튜터님 피드백까지 반영해서 정성 들인 결과물이다 ㅎㅎ 리액트 강의가 입문 -> 숙련 -> 심화 순으로 이루어져 있는데 지금은 숙련 단계에서 리덕스를 배우고 있다. .. 2022. 12. 12.
[TIL] 내일배움캠프 React 과정 2022.12.11_Redux Today I Learned React 숙련 강의 수강 React 숙련 강의 리덕스의 흐름 도식화 View 에서 액션이 일어난다. dispatch 에서 action이 일어나게 된다. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다. middleware 에서 명령 내린 일을 수행하고 난 뒤, reducer 함수를 실행한다. (3, 4번은 아직 몰라도 됩니다!) reducer 의 실행결과 store에 새로운 값을 저장한다. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다. 출처 https://velog.io/@annahyr/리덕스-흐름-이해하기 counter.js 모듈의 state 수정 기능 만들기 (+ 1 기능 구현해보기) 어떻게 coun.. 2022. 12. 11.
[TIL] 내일배움캠프 React 과정 2022.12.09_Redux Today I Learned React 숙련 강의 수강 CS DB 기초 특강 시청 Redux 특강 시청 React 숙련 강의 useState 복습하기 const [state, setState] = useState(initialState); useState는 useState라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습으로 이루어져 있다. 만약 state가 원시 데이터 타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줘야 한다. 함수형 업데이트 // 기존에 사용하던 방식 setState(number + 1); // 함수형 업데이트 setState(() => {}); // 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것. setState((currentNum.. 2022. 12. 9.
[TIL] 내일배움캠프 React 과정 2022.12.08 Today I Learend React 숙련 강의 수강 React 입문 과제 코드 리뷰 후 피드백에 따른 수정 React 숙련 강의 CSS-in-Js란? CSS-in-JS방식이란, 단어 그대로 자바스크립트로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식을 말한다. styled-components는 우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지인데 SC의 기본적인 원리는 꾸미고자 하는 컴포넌트를 SC의 방식대로 먼저 만들고, 그 안에 스타일 코드를 작성하는 방식으로 진행된다. styled-components의 기본적인 사용법 // styled-components에서 styled 라는 키워드를 import 합니다. import styled from "styled-com.. 2022. 12. 8.
[TIL] 내일배움캠프 React 과정 2022.12.07 Today I Learned 리액트 입문 개인 과제 - My Todo List 만들기 리액트 입문 과제 리뷰 특강 시청 My Todo List 구현하기 배열에서 특정 객체의 프로퍼티 값만 수정하기 const [todo, setTodo] = useState([ {id: 1, title: '운동하기', content: '테스트1', isDone: false}, {id: 2, title: '마라탕 먹기', content: '테스트2', isDone: false}, {id: 3, title: '잘 쉬고 공부하기', content: '테스트3', isDone: false}, ]); 이 배열에서 투두리스트의 완료 버튼을 눌렀을 때 그 id 값을 가진 객체만 isDone: true로 바꿔주는 것이 내가 구현하고 싶은.. 2022. 12. 7.
[TIL] 내일배움캠프 React 과정 2022.12.06_React 입문 Today I Learned React 입문 강의 수강 My Todo List 만들기 과제 수행 React 입문 강의 명령형 프로그래밍과 선언형 프로그래밍 명령형 프로그래밍 (DOM) // 순수 javaScript 명령형 코드 const root = document.getElementById('root'); const header = document.createElement('h1'); const headerContent = document.createTextNode( 'Hello, World!' ); header.appendChild(headerContent); root.appendChild(header); 명령형은 어떻게(How)를 중요시 여겨서 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 .. 2022. 12. 6.
[TIL] 내일배움캠프 React 과정 2022.12.05_React 입문 Today I Learned React 입문 강의 수강 ES6 문법 특강 수강 React 입문 강의 React란? React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리. SPA를 전제로 하고 있으며, Virtual DOM을 활용하여 업데이트해야 하는 DOM요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 향상된 퍼포먼스를 낼 수 있다. Virtual Dom (가상 돔)이란? 실제 DOM은 조작이 일어나면 바로 브라우저를 통해 여러가지 랜더링 단계를 거치게 된다. 하지만 메모리상에 그냥 값으로 존재하는 가상 돔은 변경이 일어나도 이것이 브라우저 렌더링과는 직접적으로 연결되어 있지 않다. 즉, 리액트가 가상 돔의 변화를 실.. 2022. 12. 5.

티스토리툴바