React

리액트 설치, 프로젝트 생성

1. 이벤트 설정 Counter에서 버튼이 클릭되는 이벤트가 발생하도록 특정 함수가 호출되도록 설정 Counter.js 함수 만든 후, button의 onClick으로 각 함수 연결 이벤트 설정 on이벤트이름 = {실행하고 싶은 함수} onClick={onI

1. input 생성 InputSample.jsx input에 입력하는 값이 하단에 표시 초기화 버튼을 누르면 input 값이 비워지도록 구현 useState 사용 input의 onChange 이벤트 사용 이벤트에 등록하는 함수에서는 이벤트 객체 e를 파라미터로

컴포넌트의 propsprops는 properties의 줄임말어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 사용Test 컴포넌트에서 Hello 컴포넌트 사용name이라는 값을 전달컴포넌트에게 전달되는 props는 파라미터를 통해 조회할 수 있음props는 객체

1. input 여러개 생성 InputSample.jsx 안 좋은 방법 ) input의 개수 여러개 useState 여러번 사용 onChange 여러 개 사용 좋은 방법 ) input에 name을 설정, 이벤트 발생할 때 이 값을 참조 useState에서는

JavaScript를 사용할 때 우리가 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택 리액트에서 ref라는 것을 사용 함수형 컴포넌트에서 ref를 사용할 때,

1. ref prop ref prop : HTML 엘리먼트의 래퍼런스를 변수에 저장하기 위해서 사용 예를 들어) ` 엘리먼트에 ref prop으로 inputRef` 라는 변수를 넘기면 inputRef 객체의 current 속성을 통해 `` 엘리먼트에 접근 가능

사용 용도이전 또는 다음 페이지로 이동사용자를 특정 UrlReact Router 설치npm install history@5 react-router-dom@6React Router에서 useNaviget를 importimport { useNavigate } from 'r

1. useEffect useEffect라는 Hook을 사용 컴포넌트가 마운트됐을 때(처음 나타났을 때) 언마운트됐을 때(사라질 때) 업데이트될 때 (특정 props가 바뀔 때) 마운트/언마운트 useEffect를 사용할 때 첫 번째 파라미터 : 함수

1. useMemo를 사용하여 연산한 값 재사용 성능 최적화를 위하여 연산된 값을 useMemo하는 Hook을 사용하여 재사용하는 방법 1-1. 불필요한 자원 낭비 예 countActiveUser 함수 생성 active 값이 true인 사용자의 수를 세어서 화면에

1. useCallback useMemo와 비슷한 Hook useMemo : 특정 결과값을 재사용할 때 사용 useCallback : 특정 함수를 새로 만들지 않고 재사용 onCreat, onRemove, onToggle 함수 컴포넌트가 리렌더링될 때마다

src 폴더 안에 넣는다고 자동적으로 image가 import 되지 않음js 안에 import 경로 설정해야 함js 안에 import 경로 작성import imgLogo from './imgTest.jpg';import문 안에 경로 설정하고 변수 지정하기<img>