도록

사용 목적 : 전역 상태 관리 단점 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을 실행합니다. ..

순수 함수 : 외부환경에 의존하거나 변경하지 않는 함수비순수 함수 : 외부 환경에 의존 또는 외부 환경을 변경시키는 함수 같은 내용을 행하더라도, 이렇게 보면 다르다.let a = 1;// 순수 함수const sum (num) {    return num + 5;}console.log(sum(a));   // 6// 비순수 함수const sumCopy(){    return a + 5;     // 변수 a에 의존적이다.} console.log(sumCopy());   // 6    같은 행위가 일어나도 외부 환경에 대한 의존성을 낮추기 위해 순수함수와 같이 외부 환경에 의존적이지 않게 짜기 위해 함수형 업데이트를 사용한다. setState는 비동기로 동작하기에 setState 라인에 도착했을 때의 인자..

자바스크립트는 멀티 패러다임 프로그래밍 언어이다. 객체지향 프로그래밍 프로그램을 객체의 집합으로 표현하려는 패러다임이다.  실세계의 실체(사물이나 개념)는 특징이나 성질을 나타내는 속성(attribute/property)를 갖고 있고, 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합 자료구조를 객체라고 한다. 꼭 필요한 속성만 간추려 표현하는 것을 추상화라고 한다. 객체 지향 프로그래밍은 객체의 상태(state)를 나타내는 데이터, 그리고 상태를 조작할 수 있는 동작(behavior)을 하나의 논리 단위로 묶어서 생각하는 것이다. 이때 객체의 상태 데이터를 프로퍼티(property), 동작을 메서드(method)라고 부른다. const Person = {      name : '떼굴펜',     ..

React 불변셩- 불변성이란? : 데이터가 생성된 후 수정되지 않는 성질- 리액트에서 객체의 상태 또는 배열의 상태를 변경할 때에는 항상 새로운 객체나 배열을 생성해서 -- 리액트의 state는 변경 여부를 감지할 때, 이전 상태와 이후 상태의 비교를 "얕은 비교"로 수행한다.-- "깊은 비교" : 실제 값을 재귀적으로 돌아서 확인해서 비교한다. 리스트 렌더링- key는 반드시 유일한 값이여야 한다.  todo list 만들기- 요구사항 : https://reeny404.tistory.com/44- 결과물 : https://github.com/reeny404/assign-react-js/tree/master/src/assignment/01 피카츄 놀이터 만들기 - https://github.com/re..

신발 신는 법, 설거지 하는 방법을 어디에 물어보지 않듯이, 쉽다. 내가 이걸 모르겠어? 하는 것들은 다른 사람의 답을 잘 안보게 된다. 그러던 중, 생각해본 적 없던 내용들이 있어 남겨보려고 한다.문제 설명 (링크)정수 num1, num2가 매개변수로 주어질 때, num1을 num2로 나눈 몫을 return 하도록 solution 함수를 완성하라 제한 사항0 0  입출력 예num1num2result1052723 풀이function solution(num1, num2) {  return parseInt(num1 / num2);} 제출 후 다른 사람 풀이를 보니, 다양한 풀이법들이 있었다.function solution(num1, num2) {     return ~~(num1/num2);  // 틸트 연..