10. Midterm Arrangement (중간정리) 참고용 velog https://velog.io/@ty-yun21/react10 참고용 github https://github.com/ty-yoon21/react-study1 commit message : (2023.02.08) 10. Mitrem Arrangement 목표 Styled Components 정리 Styled Compnents (CSS in JS) : https://www.daleseo.com/react-styled-components/ 1.1 ThemeProvider : https://wonit.tistory.com/366 propTypes : https://velog.io/@eunjin/React-PropTypes-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0-%EB%B0%A9%EB%B2%95 Suspense, La

9. ReduxSaga 참고용 velog https://velog.io/@ty-yun21/react9 참고용 github https://github.com/ty-yoon21/react-study1 commit message : 2023/02/08 redux, redux-saga 목표 redux-saga 정리 redux-saga 1.1 redux-saga https://react.vlpt.us/redux-middleware/10-redux-saga.html 1.2 Generator Function & Action Mornitoring : redux-saga 에서는 제너레이터 함수를 "saga" 라고 부릅니다. : redux-saga에서는 이러한 원리로 액션을 모니터링하고, 특정 액션이 발생했을때 우리가 원하는 자바스크립트 코드를 실행시켜준답니다. 1.3 Summary 오류 store/index.j

8. useEffect, useReducer, useDispatch, useSelector, useMemo, useCallback 참고용 velog https://velog.io/@ty-yun21/react8 참고용 github https://github.com/ty-yoon21/react-study1 commit message : 목표 useEffect useReducer 정리 useEffect 1.1 개요 : useEffect를 활용해서 마운트 (처음 나타났을 때), 언마운트, 업데이트 (특정 props가 바귈 때) 될 때 특정 작업을 처리하는 방법 : useEffect 사용 시 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)를 넣음 deps를 비우면 컴포넌트가 처음 나타날 때만 useEffect에 등록한 함수 호출 : 마운트시 주로 하는 작업들 --> props로 받은 값 컴포

7. Redux 참고용 velog https://velog.io/@ty-yun21/react7 참고용 github https://github.com/ty-yoon21/react-study1 commit message : 목표 Redux 정리 Redux 1.1 미들웨어 : 리덕스로 상태 관리시 우리가 useReducer를 사용할 때 접했던 개념인 리듀서 함수 사용... : 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업들 수행 가능 --> 특정 조건에 따라 액션 무시 가능 --> 액션을 콘솔에 출력하거나 서버로깅 가능 --> 액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 가능 --> 특정 액션이 발생 시 이를 기반으로 다른 액션 발생 --> 특정 액션 발생 시 특정 자바스크립트 함수 실행 가능 1.2 유용한 함수 connect : 리덕스의 상태 또는 액션 생성함수

6. 배열에 항목 추가/제거/수정 참고용 velog https://velog.io/@ty-yun21/react6 참고용 github https://github.com/ty-yoon21/react-study1 commit message : 목표 배열 항목 추가 배열 항목 제거 배열 항목 수정 정리 배열 항목 추가 배열 항목 제거 배열 항목 수정 Reference 벨로퍼트 리액트 https://react.vlpt.us/

5. JSX, props, useState, useRef, 배열 렌더링 참고용 velog https://velog.io/@ty-yun21/react5 참고용 github https://github.com/ty-yoon21/react-study1 commit message : 목표 JSX props useState useRef 배열 렌더링 useRef 심화 정리 JSX : HTML 문법 같이 생겼지만 실제로는 JS : Babel을 통해서 자바스크립트 문법을 확장해줌 (ES6 --> ES5) : 꼭 태그는 닫혀 있어야 함 : 두개이상의 태그는 또는 fragment 로 닫혀 있어야함 fragment는 브라우저상 별도의 엘리먼트로 나타나지 않음 : JSX안에 JS값 사용하려면 {}로 감싸서 보여줘야 함 : style 적용하려면 background-color 같은 애들을 backgr

3. useState, local Storage, useEffect 참고용 velog https://velog.io/@ty-yun21/react3 참고용 github https://github.com/ty-yoon21/react-study1 commit message : 2. UI & Router * 목표 useState 활용 local Storage useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 정리 useState 활용 컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때 어떻게 구현할 수 있는지 컴포넌트에서 동적인 값을 상태(state)라고 부릅니다. 리액트에 useState 라는 함수가 있는데요, 이것을 사용하면 컴포넌트에서 상태를 관리 할 수 있습니다. 1.1 ./container/App.js