행복을 담는 블로그

요구 사항 라우팅 설정 - React Router를 사용하여 투두 리스트 페이지와 투두 아이템 상세 페이지 간의 라우팅을 구현합니다. - URL 경로는 / 로 투두 리스트 페이지를, /:todoId 로 각 투두 아이템의 상세 페이지를 나타냅니다. 상세 페이지 구현 - 투두 아이템의 상세 정보(예: 제목, 설명, 완료 여부 등)를 표시합니다. - 상세 페이지는 투두 아이템의 ID를 기반으로 해당 아이템의 정보를 찾아 표시합니다. 1. page와 Router 설정하기 1) HomePage 와 DetailPage를 구분한다. /* Home 페이지 */ function Home() { return ( ); } ▶️ 기존의 Header와 TodoController를 Home 페이지 하위로 넣어준다. 2) Rout..

헤헿 똥멍청이 같은 실수를 했따,,, 멍청한 실수... 2탄...!! 바로 return도 안 하고 왜 안 보임???????? 이러고 있었다!!! letter 수정하기 버튼을 실행을 하는데, 처음에는 그냥 p 태그로 보여주다가, "수정하기" 버튼을 누르면 textarea 태그로 바뀌어 수정할 수 있도록 하려고 했다! 그래서 겨우 생각을 정리해서, 코드를 짰는데 왜 안 돼!!! // letter 수정하기 const updateBtnClickHandler = () => { updateBtn(id); }; const updateContent = () => { if (isUpdate === false) { {content}; } else { {content}; } }; {updateContent()} {isUpd..

벌써 2월이라니... 시간이 너무 빨리 지나가는 것 같다. 하는거라곤 매일 앉아서 12시간씩 코딩하는 것 밖에 없는데 말이야... 시간 제발 멈춰봐 아직 해야 할 게 너무 많이 남았는데 왜 벌써 목요일이신지... 하하하... 아무튼 간에 이번주는 React 숙련 주차로 react hook과 context api, 그리고 redux 까지 엄청난 강의를 들으며 또다시 새로운 기술들을 배우고 익히고, 이를 적용한 "그룹 아티스트 팬레터 만들기"를 진행하는 중이다. 한 번에 모든 코드 리뷰 쓰려면 엄청 힘들듯 하여, 오늘부터 조금씩 작성해보고자 한다. 1. 프로젝트 셋업 1) CRA 로 프로젝트 생성 npx create-react-app fan-letter 이 명령어를 이용하여 프로젝트를 생성하였다. 2) pa..

1. React 개인과제 "그룹 아티스트 팬레터함" 만들기 멍청한 실수 1) App.jsx을 Router의 하위 컴포넌트로 부르다...🤦🏻‍♀️ Router를 이용하여 각 멤버별로 페이지를 이동시키는 작업을 진행하였다. 내가 생각했을 때, mainpage에 모든 컴포넌트가 다 들어 있으니, home으로 가는 화면은 App.jsx로 이동하면 되겠다! 라고 생각을 했다. 근데 무슨,, 계속 오류가 났다. You cannot render a inside another . You should never have more than one in your app. 계속 가 중첩으로 된단다... 나는 Router 이름을 중복으로 쓴 적도 없고, 처음 Router 설정을 한 건데 말이다... 그래서 chatGPT 한테도..

2. useEffect : 렌더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 훅 컴포넌트가 화면에 보여졌을 때 컴포넌트가 화면에서 사라졌을 때 input에 값을 입력 value, 즉 state가 변경 state가 바뀌었기 때문에, App 컴포넌트가 리렌더링 리렌더링 되었기 떄문에, useEffect()가 계속 실행 1~4 반복 **Dependency Array (의존성 배열)**라는게 필요하다 이 배열에 값을 넣으면, 그 값이 바뀔때만 useEffect를 실행한다. 의존성 배열에 아무 값도 넣어주지 않아도 동작하고 있다. = 어떤 값을 입력하던지 간에, 의존성 배열이 비어 있기 때문에, 화면이 가장 처음 시작할 때만 렌더링 된다. useEffect(() =>..

1. useState 📌 정의 가장 기본적인 hook으로, 함수 컴포넌트에서 가변적인 상태를 가지게 해준다. ✅ 기본 형태 const [state, setState] = useState(initialState);▶️ 원래는 useState라는 함수가 배열을 반환하고, 이 배열을 구조분해할당으로 꺼내 놓은 형태이다. state를 변수로 사용, setState를 이용하여 state 값을 수정한다. ++ state가 원시 데이터가 아닌 객체 데이터 타입일 경우 불변성을 유지 해야한다. useState의 업데이트 방식 // 기존 업데이트 방식 setState(number + 1); // 함수형 업데이트 방식 setState(() => {}); 초기값이 0인 number를 setNumber를 통해 +1 씩 증가하..

1. CSS-in-JS : Javascript code로 CSS code를 작성하여 컴포넌트를 꾸미는 방식을 말한다. 기존에 CSS 작업을 하기 위해서는, css 파일을 따로 만들어 className을 넘겨주어 작업을 하였지만, CSS-in-JS 방식은 따로 css 파일을 만들지 않고, js 파일 안에서 css 작업까지 완성할 수 있다. 2. Styled Components : React 에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지를 말한다. 아래 npm trends를 비교해보면 styled-component를 가장 많이 사용하는 것을 알 수 있다. 🧐 그렇다면 패키지란 무엇인가? : 리액트 자체에는 없는 기능을 사용할 수 있도록 외부로터 가져와서 사용할 수 있는 외부 라이브..

Redux 설치하기 yarn add redux yarn add react-redux 이렇게 두 개를 설치해야하는데, 둘 사이를 띄우고 설치하면 한 번에 가능하다! yarn add redux react-redux package.json에서 설치 완료 확인! Redux 파일 설명 redux : 리덕스 관련 코드를 모두 몰아넣음 config : 리덕스 설정 관련 파일 전부 configStore : 중앙 state 관리소 -> 설정 코드(.js) modules : state의 그룹! ex) Todolist. todo.js export v.s. export default export로 내보내는 경우 : { 중괄호 } 필요 export store; import { store } from "./redux/config..