도록

1. props drilling전역 변수 관리라는 개념이 없었을 땐, 부모가 자식에게 계속해서 내려주는 형태였다.grand parent > parent > childparent 는 사용하지 않지만 child가 필요로 하는 props를 grand parent로 부터 받아 내려주는 것을, props drilling이라고 한다.props drilling 을 해결하기 위해 redux가 나왔고, 이후에 React 개발진이 전역관리를 위해 내놓은 해결책이 context 이다.  2. redux 전역 변수를 자유롭게 쓰고 싶은데, 너무 쉽게 하면 여기저기서 쓸까봐 걱정이 된 것인지, redux 까다롭게 정해진 규격으로만 전역변수를 쓰거나 읽을 수 있게 했다. store라는 저장소에 전역변수들을 저장하고, 전역변수에 ..

1. autufocus2. 메모 작성 시 첫 줄 title 보여주기 (길면 줄여쓰기)3. 새로운 메모하면 최상단에 추가 (최신순 정렬)4. 현재 열려있는 memo 데이터 삭제 시 제일 최신 것 선택하기그 외에는 view와 동일 https://teamsparta.notion.site/03-5965145e055b4912b4dd3bb6611a1363 과제 03 - 메모앱 만들기 | Notion메모앱 만들기teamsparta.notion.site  # 메모앱 만들기## 01. 과제 샘플- https://www.notion.so/teamsparta/03-5965145e055b4912b4dd3bb6611a1363- [링크: https://memo-app-ashen.vercel.app]  ## 02. 요구사항### ..

사용 목적 : 전역 상태 관리 단점 1. 복잡하다 + 러닝커브가 있다.2. 아주 간단한 상태 관리를 위해서도, 초기 작성해야하는 코드 량이 많다. 단점 개선을 위한 라이브러리1. Recoil, Zustand : 쉽게 쓸 수 있도록 개선2. React Query : 클라이언트 상태 관리에서 비동기 통신 작업이 어려워 (코드 양이 많음) 서버 상태와 실시간 동기화가 어렵다는 단점을 개선/개량하기 위함 + 서버 데이터 캐싱은 부가적인 장점3. Context Api : 리액트 라이브러리만으로 비동기  특징1. 단방향 데이터 흐름 (flux 아키텍쳐처럼 단방향 데이터 흐름이다.)2. 의도된 복잡함(까다로움) -> 데이터를 엄격하게 변경하기 위해 (유지보수와 예측가능성을 위해서)3. 배우기 조금 까다로움 핵심개념-..

1. css import 하기import "./Card.css" 2. sass module 사용하기❓ sass module의 장점 ❓ : css 적용을 위한 classname이 중복이 되지 않도록 하나뿐인 이름을 지정할 수 있다.// Card.module.scss.title {      color : red;     > span {          background-color : blue;     }}.hello { .... }// Card.jsximport "./Card.module.scss"....    return (             );.... 3. styled-components 라이브러리 사용하기https://styled-components.com/ 에서 인스톨 받은 후 아래처럼 쓸 수..

불필요한 렌더링을 줄이기 위해 사용하는 방법들- React.memo : 컴포넌트 캐싱- useCallback : 함수캐싱- useMemo : 값 캐싱 React.memofunction Box () {     return 박스; }export default React.memo(Box);  ❗함수도 function도 참조형 변수이기에, 만약 아래 예시와 같이 함수를 props로 전달하게 된다면 Parent가 리렌더링될 때 React.memo로 지정한 Box 컴포넌트도 리렌더링이 된다. -> useCallback을 사용하면 렌더링하지 하지 않도록 변경할 수 있다.function Parent () {     const [count, setCount] = useState(5);     const initCount..

useState: 컴포넌트에 state 변수를 추가할 수 있다 (공식 문서)const [state, setState] = useState(initialState);    - initialState : 초기 설정값const [age, setAge] = useState(28);console.log(age); // 28setAge(30); console.log(age); // 30   useEffect: 외부 환경과 같은 생명주기를 가질 수 있다 (공식 문서)useEffect( setup, dependencies? );    - setup : Effect의 로직이 포함된 기능입니다. 선택적으로 정리 함수를 반환할 수도 있습니다.    - dependencies : 값이 변경될 때마다 setup을 실행합니다. ..