React

❓ JSXJSX 는 JavaScript 를 확장한 문법이다.쉽게 말하자면 자바스크립트에서 Html 과 유사한 문법을 사용할 수 있도록 만들어진 문법? 우리가 기존에 웹 사이트를 만들 때, Html, Css, JavScript 를 가지고 만들었다면React 에서는 Html 대신 JSX, Css, JavaScript 를 가지고 만든다고 이해하면 쉽다. ❓ JSX 문법 (+ Html 과의 차이점)1. classhtml 에서 클래스를 부여할 때 class 를 사용했지만, JSX 에서는 className 을 사용한다.기존 HTMLJSX 문법  2. styleJSX 에서는 style 을 정의할 때, {{ 속성명: "속성값" }} 와 같이 객체 형태로 작성한다.그리고 CSS 속성명은 카멜케이스로 표현해야 한다.예를 ..

💡 useCallback참고영상https://www.youtube.com/watch?v=XfUF9qLa3mU&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=7 useMemo 보러가기https://hye-story-o0o.tistory.com/30 [React] useMemo 알아보기💡 useMemo참고영상https://www.youtube.com/watch?v=e-CnI8Q5RY4&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=6React 로 개발하다 보면 컴포넌트의 성능을 최적화하고 싶은 순간이 찾아온다. 특히 컴포넌트가 자주 리렌hye-story-o0o.tistory.com React 애플리케이션에서 함수 컴포넌트를 작성하다 ..

💡 useMemo참고영상https://www.youtube.com/watch?v=e-CnI8Q5RY4&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=6React 로 개발하다 보면 컴포넌트의 성능을 최적화하고 싶은 순간이 찾아온다. 특히 컴포넌트가 자주 리렌더링 되거나, 복잡한 계산을 반복 수행할 때 성능 저하가 발생할 수 있다. 데이터 테이블, 리스트 등에서 수 천 개 이상의 항목을 렌더링 해야 되거나.. 부모 컴포넌트의 상태 변화로 인해 자식 컴포넌트가 불필요하게 재렌더링 되거나.. 이럴 때 useMemo 훅을 사용하면 유용하다.   ❓ useMemo 가 뭘까?useMemo 는 React 훅 중 하나로, 특정 계산의 결과를 메모이제이션(memoization)하여 성..

💡 useRef참고영상https://www.youtube.com/watch?v=VxqZrL4FLz8&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=3 https://www.youtube.com/watch?v=EMK8oUUwP5Q&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=4useRef 는 React 함수 컴포넌트에서 DOM 요소에 직접 접근하기 위해 사용되는 React 훅(hook)이다. 여기서 Ref는 reference 참조를 뜻한다. 함수형 컴포넌트에서 useRef 를 부르면 ref 오브젝트를 반환해준다.const ref = useRef(value)// ref 오브젝트: { current: value }우리가 인자로 넣어준 ..

💡 useEffect 참고영상https://www.youtube.com/watch?v=kyodvzc5GHU&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=2React 에서 useEffect 는 함수 컴포넌트가 렌더링 될 때마다 부수 효과(side Effects)를 수행할 수 있게 해주는 핵심적인 React 훅(hook)이다. 여기서 Side Effects 란, 컴포넌트 외부와의 상호작용을 말하며, 주로 데이터 가져오기, 구독 설정 등을 포함한다.  useEffect 는 기본적으로 매 렌더링 후에 실행되지만, 의존성 배열(dependency array)을 통해 특정 상태나 props 가 변경될 때만 실행되도록 설정할 수 있다. 이는 컴포넌트 생명주기와 비슷한 역할을 한..

💡 useState참고영상https://www.youtube.com/watch?v=G3qglTF-fFI&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=1React 에서 useState 는 함수형 컴포넌트에서 상태(state)를 관리하기 위해 사용하는 훅(hook)이다.   ❓ state 가 뭘까?React 에서 state 는 컴포넌트가 가질 수 있는 상태를 의미한다.예를 들어, 쇼핑 카트 라는 컴포넌트가 있다면 state 로 items 라는 state 를 가질 수 있다.   ❓ useState 기본 사용법먼저 state 를 생성할 때 useState 함수의 인자로 초기값을 전달한다.그러면 useState 함수는 현재 상태 값(state)과 그 상태를 업데이트하는 함수..