함수의 재사용 useCallback을 사용하지 않으면 컴포넌트가 랜더링 될 때마다 함수들이 실행되게 된다. 두번째 파라미터에는 []값이 들어가는데 이 값이 변결 될 때마다 함수가 실행된다.

함수의 값을 재사용한다. 주로 성능을 최적화 할때 사용한다.

useEffect는 페이지가 랜더링 될 때마다 작업을 처리하는 역할을 한다. 컴포넌트가 실행될 때마다 아래에 console.log("안녕하세요") 가 실행되게 된다. useEffect는 두번째 파라미터를 받는데 [] 형식으로 작성한다. 만약 배열안에 값이 아무것도 없다면 랜더링 될 때 한번만 실행이 되고 값이 있는 경우 그 값이 변경될 때마다 실행이 된다. 만약 return 값을 넣어준다면 값이 사라질 때 작업을 처리하게 된다.

useRef로 컨포넌트 안의 변수 만들기 어떤값을 바꿨을 때 리랜더링 할 필요가 없을 때 useRef를 사용한다 컴퍼넌트가 리랜더링 될때마다 계속 기억 할 수 있는 어떠한 값을 관리 할 때 사용한다. ex) setTimeOut, setInterval의 id 외부 라이브러리를 사용하여 생성된 인스턴스 scroll 위치 ... useRef를 사용하는 컴퍼넌트는 값이 바뀌어도 리랜더링 되지 않는다.

useRef로 특정DOM 선택하기

내용을 전달할 때 보통 을 사용한다. `에서 내부적으로 처리해야할 데이터가 있을 경우 onSubmit` 사용 `에서 submit` 할 때 특정 함수를 실행시키는 방법 `javascript에서 onSubmit 이벤트 속성에 들어가는 함수는 반드시 반환 할 경우 true를 반환하고 하지말아야 할 경우 false`를 반환하는 형식이어야 한다.

event.target & event.currentTarget 위 코드에 `Check`값을 다음과 같이 주고 실행시켜본다 `event.target 값으로는 Click ` 나오고 `event.currentTarget 값으로 Click ` 나온다. `event.target`은 자식요소를 리턴하고 `event.currentTarget`는 부모요소를 리턴한다. > 객체 안에서 key를 `[ ]`로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용된다. const name = 'tom'; const object = { [name] : 'value' }; //결과 값 { 'tom' : 'value' } ``

jsx 속성은 항상 ""로 감싼다 태그는 항상 닫혀있어야한다 셀프 클로징이 가능하다 형제 노드로 작성할 수없다 jsx 안에서 javascript는 다음과 같이 사용한다 return에서 변수명을 {}중괄호로 감싼다 jsx에서 주석은 다음과 같이 사용한다

React로 component를 만드는 방법은 class와 function을 사용하는 두가지 이다. `클래스 스타일`은 모든 기능을 사용할 수있지만 복잡하다. `함수 스타일은 기능은 제한적이지만 단순하다. 하지만 최신 함수 스타일에는 hook 기능이 추가되면서 클래스 방식에 버금가는 component`를 만들 수 있게 됬다. > 기본 예제 props > Class style > Function Style > state > Class Style > Function Style > `useState() 사용시 배열이 리턴되고 배열안에는 두개의 값이 존재한다. 첫번째는 상태값 두번째는 상태를 바꾸는 함수`이다 ![](https://images.velog.io/images/sjho0428/post/b43d05a4-4ae5-47fd-9e8f-47f

React 컴포넌트에서 다루는 데이터는 두가지로 나뒨다. `props & state` props `props`는 부모컴포넌트가 자식컴포넌트에게 주는 값이다. 자식컴포넌트에서는 `props`를 받기만하고 직접 수정 할 수는 없다. > > `부모 Component(App.js)에서 지정한 maker, color, capacity가 자식 Component(SmartPhone.js)로 전달되어 SmartPhone에서 this.props.maker, this.props.color, this.props.capacity`가 사용된다. state `state는 compenent` 내부에서 선언하고 내부에서 값을 변경 할 수있다. `props`의 값에 따라 내부의 구현에 필요한 데이터이다. 외부에서 알 필요 없는 정보를 은닉한다. > ``c