[React] useReducer, context API로 투두리스트 만들기

챌린지반 과제로.. 과제로 나온 Context, RTK 외에 useReducer도 다뤄보자는 의미로 투두리스트 만들기 과제가 생겼다ㅎㅎㅎ 개인과제를 조금 욕심내서 기능구현 위주로 빨리 해보자고 목표를 잡은게 다행이었던 것 같다.. Reducer: 여러곳으로 흩어져있는 state 관리 로직을 단일 함수로 통합해 관리하기위해 사용즉, state를 다루는 방법 중 하나다! useState에서 useReducer로 변경하기1. state를 설정하는 것에서 action을 dispatch로 전달하는 것으로 바꾸기- setState를 사용해야하는 부분에서 setState로 직접 변경하는 것이 아니라 action을 전달해 어떤 형식으로 업데이트 할지 reducer에게 전달- action은 일반적으로 객체, state와..

• format_list_bulleted 챌린지반
• · 2024. 8. 26.
• textsms

[React] useState, useEffect 동작 만들어보기

오늘은 useState와 useEffect를 간단하게 만들어보는 실습을 진행했다.클로저에대해 대강 이해는 해도 어떨 때 쓰는건지 잘 와닿지 않았는데 오늘 조금은 더 알게된 거 같다! 클로저함수와 그 함수가 선언될 때 렉시컬 환경의 조합함수가 생성될 당시의 외부 변수 상태를 기억하고, 이를 함수 호출시에도 계속 접근할 수 있게 해줌 function outer() { let count = 0; // inner함수가 선언될 때의 환경 return function inner() { count++; console.log(`Count: ${count}`); }}const counter = outer();counter(); // Count: 1counter(); // Count: 2counter();..

• format_list_bulleted 챌린지반
• · 2024. 8. 21.
• textsms

[React] You might not need an effect를 읽고 프로젝트 effect 수정하기

챌린지반에서 지원해 진행하게된 발표 자료다. 다른 아티클도 있었지만 이 내용을 선택한 이유는 지난번에 시간에 쫓겨 제대로 알아보지 못한 useEffect를 제대로 알아보고싶다는 생각이 들어서였다. 단순히 아티클 내용을 설명하는 것이 아니라, 공부하면서 막혔던 부분을 어떻게 해소했는지 / 그리고 이전에 진행한 메달 트래커 과제에서 사용한 useEffect들을 다시 살펴보고 수정하는 내용을 발표했다. 목차1. 아티클 내용 중 이해가 어려웠던 부분과 해결 방법2. 메달 트래커 과제에서 사용한 useEffect 돌아보기 useEffect컴포넌트가 렌더링된 후 실행할 동작을 설정할 수 있는 Hook의존성 배열을 이용해 특정 값이 변경됐을 때만 동작을 실행하도록 설정할 수 있음! Effect가 필요없는 일반적인 경..

• format_list_bulleted 챌린지반
• · 2024. 8. 20.
• textsms

[React] CRA, Vite 없이 개발환경 구축하기

프로젝트 초기 설정1. 프로젝트 폴더 생성 2. HTML 파일 생성  3. React와 ReactDOM CDN 추가  Babel 적용해 JSX 사용하기위의 문법에서 오류가 발생하는 이유는 아직 현재 프로젝트에서 JSX 문법을 모르기 때문이다. 트랜스파일러프로그래밍 언어의 코드를 다른 프로그래밍 언어 또는 동일한 언어 내에서 다른 버전이나 형식으로 변환하는 도구JSX 등의 최신 확장 문법의 JS들을 구버전 JS로 변경 1. Babel 설치 2. scrpit tag 수정- type="text/babel"설정 추가해 babel이 어떤 스크립트를 트랜스파일 할지 지정 3. 패키지 초기화npm init -ynpm install --save-dev @babel/core @babel/cli @..

• format_list_bulleted 챌린지반
• · 2024. 8. 19.
• textsms

[React] 리액트 훅, 리액트를 함수로 분석하기

State Hook: 사용자 입력과 같은 변하는 정보를 기억할 수 있는 훅useState직접 업데이트 할 수 있는 state 변수를 선언 useReducerreducer 함수 내부의 업데이트 로직을 사용해 state 변수를 선언  Effect Hook: 컴포넌트를 외부 시스템에 연결하고 동기화할 수 있게 함데이터 흐름을 조정하기 위해 사용하지 않아야 함! (이런 경우는 state hook 사용) main.jsx -> 컴포넌트를 실행하는 엔트리포인트 (비트가 가장 먼저 실행하는 함수)  리액트 함수로 이해하기은 {App()}과 같다!App()은 App이라는 함수의 결과값으로 치환되는데, 함수형 컴포넌트의 반환값은 하나의 태그로 감싸진 태그들이다function ComponentEx() { return( ..

• format_list_bulleted 챌린지반
• · 2024. 8. 14.
• textsms