react로 개발하던 중 firebase에서 데이터를 받아오고 그 데이터를 useState의 배열로 저장하는 일이 종종 있다. > ### ⭐ const [ info, setInfo ] = useState( [ ] ); SetInfo로 값을 받아오게 된다면 info를 console.log를 찍으면 배열 안에 값이 담겨져 있을 것이다. 그렇다면, info에 새로운 값을 push 하게 되면 어떻게 될까? setInfo.push( ), console에는 값이 들어오지만 화면에는 반영이 안되는 것을 확인할 수 있다. 그 이유는 react에서 state 값이 바뀐 것을 인식하지 못하기 때문이다. 그래서 내가 해결한 방벙은 하나의 변수를 줘서 info의 값을 스프레드 연산자로 처리해주는 것이다. ⭐ const newInfo = [...info]; 이렇게 되면 info의 값이 새로운 배열로 newInfo 안에 들어가게 된다.

React Memoization 📋 ➡ **메모이제이션(memoization)은 컴퓨터가 동일한 계산을 반복해야 할 때 맨 처음 계산한 값을 메모리에 저장해서 필요 할때마다 메모리에서 해당 값을 꺼내서 사용하는 것을 말한다. ** 왜 사용하는지? 💟 **state와 props를 통해 수많은 랜더링이 일어난다. 랜더링이 일어날 때 무거운 작업을 수행한다.** 남용하면 안되는 이유 🚫 무분별한 사용은 메모리 사용량이 커져 오히려 성는에 더 악화된다. useMemo useMemo는 두개의 인자를 받는데 1번째 인자로는 callback 함수, 2번째 인자로는 배열을 받는다. > 배열 안의 item이 변경 될 때만 콜백함수를 다시 호출한다. useCallback **useCallback은 useMemo와 비슷하지만, useMemo는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback은 함수의

타입스크립트를 배우고 나서 곧장 프로젝트가 시작 되었다. 새로운 5명의 팀원으로서 이번에는 구글에서 제공하는 유튜브 API를 이용해서 유튜브 영상을 이용한다. 주제는 초보 개발자를 위한 사이트로써 언어별로 영상을 볼 수 있고, 댓글로 깃헙 링크를 주고 받으며 소통할 수 있는 사이트를 계획 했다. 내가 맡은 부분은 디테일 영상이다. 메인 페이지에서 유뷰브 목록을 클릭시 디테일 페이지로 넘어가며 그에 대한 영상도 실행 되게끔 해야한다. ** onClick 과 useNavigate 를 통해 detail 페이지 뒷 부분은 params로 video 데이터까지 같이 보내준다 ** ![](https://velog.velcdn.com/images/kminu0819/post/8fd7e5

Styled Components ⭕styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다. ⭕설치 방법 > $ npm install --save styled-components ⭕기본 문법 > ⭕Props ⭕컴포넌트에 prop을 설정하여 background-color: ${(props) => props.bgColor}; 와 같은 동적인 코드를 만들 수 있다. ⭕확장 > 'as' and attrs ⭕'as' HTML 태그를 바꿔준다. > ⭕attrs 컴포넌트에 기본 값을 줄 수 있다. > >

리액트를 공부하기 시작하면서 간단한 기능 구현을 해봤다. useState를 사용하여 button을 누르면 숫자가 증가, 감소되는 기능을 구현했다. return에는 button 태그에 onClick 함수를 넣어주면서 숫자가 증가, 감소되게 하고 useState(0)에 0을 넣어 초기값을 넣어줬다. 🔥코드를 살펴보자 > ✔ App 함수 안에 const [count, setCount] = useState(0); 을 설정해줌으로써 0을 초기값으로 하고 setCount를 이용해 count에 변화를 줄 수 있다. ✔ 함수 plus, minus를 보면 setCount를 이용해 count에 + 1을 해준다. ✔ h2 안의 {count}는 초기값 0이다.

컴포넌트에 데이터를 전달하는 데이터를 prop이라고 한다. (Properties의 줄임말) Props 단일 값 전달하기 컴포넌트 작성 시 해당 컴포넌트 태그에 변수이름={}으로 사용한다. > 전달받는 컴포넌트 (자식 컴포넌트)에서는 매개변수로 받아올 수 있는데 객체 타입으로 전달 받는다. > 구조 분해 할당을 통해 더욱 쉽게 받을 수 있다. 객체나 배열 구문에서 속성을 바로 해체해서 변수처럼 사용할 수 있는 표현식이다. >

* props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.* props 컴포넌트는, 데이터를 가진 하나의 'props' 객체 인자를 받은 후 React 엘리먼트를 반환한다. 이때 props는 속성을 나타내는 데이터다. props는 컴포넌트에서 컴포넌트로 전달하는 데이터다. 컴포넌트의 속성으로, 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서만 설정 가능하다. state state는 컴포넌트 내부의 동적 데이터를 의미한다. props는 부모 컴포넌트가 설정하는 값으로 컴포넌트 자신은 props를 읽기 전용으로만 사용할 수 있다.

리액트를 공부하기 위해 오늘 리액트 강의를 들어보게 되었다. 리액트란? > React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. React는 facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있습니다. 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다. React의 특징 > 선언적 (Declarative)이다 👉🏻 리액트는 대화형 UI를 작성하기에 유리하다. 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있도록 한다. 컴포넌트 기반(Component-based)이다 👉🏻 캡슐화된 컴포넌트가 스스로 상태를 관