CASSIE'S BLOG

useEffect component가 마운트 / 언마운트 / 업데이트될 때, 할 작업을 선택하도록 하는 Hook함수. 외부 API를 요청하거나, 반복작업 / 작업예약 등에 쓰인다. ​ * mount : component가 처음 화면에서 보여질 때 (=새로고침 시) (componentDidMount 메서드) ​ * unmount : component가 화면에서 사라질 때 (componentWillUnmount 메서드) ​ * update : 특정 props가 바뀌어 component가 업데이트될 때 (componentWillUpdate 메서드)

70강~74강 Redux Part 5. 리덕스 비동기 처리를 하는 방법은 두 가지가 있다. 1. 컴포넌트 내의 useEffect() 같은 훅을 통해서 2. Thunk 같은 action creater를 통해서 비동기 로직을 작업하다가 이슈가 생기면 요청을 보내야할 때 보내지 않았거나, 보내지 않아야할 때 보냈는지 체크해 본다. React Router 리액트에서 라우팅을 기존의 전통적인 앱 어플리케이션과 어떤점을 다른점을 가지고 처리를 하는지 알아보자. 웹브라우저에서 라우팅이란? (Multi Page Application)에서 페이지가 이동하는 것 /home home.html -> 페이지 변경 /user user.html SPA: 싱글 페이지 어플리케이션 여러분들이 만든 서비스에서 여러가지 페이지가 있잖아요..

의존성 배열 의존성 배열(dependency array)은 React의 useEffect 훅에서 사용되는 개념으로, 해당 훅의 실행을 언제 트리거할 것인지를 결정합니다. 좀 더 간단하게 설명하면, 의존성 배열에 들어 있는 값들이 변화할 때마다 useEffect에 전달된 함수가 실행됩니다. 예를 들어, 다음과 같은 코드가 있다고 가정해봅시다: useEffect(() => { // 부수 효과 코드 }, [dependency1, dependency2]); dependency1과 dependency2는 의존성 배열에 있는 값들입니다. 의존성 배열 안의 값들이 변할 때마다, useEffect에 전달된 함수가 실행됩니다. 의존성 배열이 빈 배열([])인 경우, useEffect는 컴포넌트가 처음 마운트될 때 한 번..

퍼옴 UI디렉토리를 따로 빼서 슈퍼코딩 62강에서 Table.js, BackwordCounter.js, ForwardCounter.js 이렇게 처리하길래 찾아본 정보 출처: https://hyunwoo12.tistory.com/44 https://www.youtube.com/watch?v=UUga4-z7b6s&list=LL&index=2 Junior vs Senior React Folder Structure - How To Organize React Projects - Web Dev Simplified 강의를 듣고 정리해봤다. 구조 assets : 공통으로 사용하는 .css , 이미지 등 components : 공통으로 사용하는 컴포넌트 ui, form 디렉토리를 따로 둬서 관심사 별로 분리 contex..

React의 개발환경을 구축하는데 다음과 같은 에러가 계속 났다. npm ERR! missing script: start npm ERR! A complete log of this run can be found in: npm create-react-app를 실행하고, npm run start를 했는데 계속 위와 같은 오류가 났다. 구글링하니까 scripts 에 start 에 index.js를 추가하면 된다고하는데.. 계속 안됐다. 그래서 나의 해결방법 (왜 이제 작동되는지는 이해 안감..) 1. visual studio code에서 cd를 하여 현재 작업을하려는 디렉터리로 바꿨는지 확인한다 2. cmd 창에서 npx create-react-app my-app 입력 후 엔터 (처음 구조 말끔하게 다 구축됨 ..

17강 creact-react-app은 명령어다. 여기서 my-app은 여러분들의 "어플리케이션" 이름이라고함. -로 연결한걸 케밥케이스라고함. 소문자 + 하이픈 + 소문자 이런 식으로 이름 지어야된다고함. 이걸 그냥 터미널에서 하면 된다. 이것도 모르고 있었네;; 그 다음에 프로젝트를 만들었기 때문에 그 경로로 cd 해서 프로젝트 경로로 먼저 들어가야한다!! 19-1강 className 반드시 카멜케이스여야한다고 설명해주네. 꺽쇠문자열은 반드시 중괄호로 감싸야한다. {`tost toast-${props.title}`} 20강 css파일은 js파일과 같은 위치에 둔다. Attribute를 만든다. 이게 방법1 인자로 index도 가져올 수 있단다. message 가 왜 첫번쨰 인자인지 이해를 못해서 다른..