React/React 공부하기 (3) 썸네일형 리스트형 함수형 컴포넌트와 클래스형 컴포넌트의 차이 React 컴포넌트를 만들때 클래스형 컴포넌트, 함수형 컴포넌트 2가지 방식이 있다 과거에는 클래스형 컴포넌트를 많이 사용했지만 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서도 함수형 컴포넌트와 훅(hook)을 함께 사용할 것을 권장하고 있다. [함수형 컴포넌트를 선호하는 이유] 요즘은 많은 개발자들이 클래스형 컴포넌트보다 함수형 컴포넌트+Hook을 사용한다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 갖고 있는 반면, 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려준다. Hook들을 필요한 곳에 사용하며 Logic의 재사용이 가능하다는 장점이 있어.. 컴포넌트 반복 : map() [map() 함수] arr.map(callback, [thisArg]) 1) callback : 새로운 배열의 요소를 생성하는 함수이며, 파라미터는 다음 3가지 - currentValue : 현재 처리하고 있는 요소 - index : 현재 처리하고 있는 요소의 index 값 - array : 현재 처리하고 있는 원본 배열 2) thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스 [컴포넌트 map 예시 1 - key가 없는 경우] : 하단의 예시대로 한다면 키값이 없어 콘솔창에 경고를 출력하게 된다. key • 리액트에서 key는 배열을 렌더링 했을 때 어떤 엘리먼트에 변동이 있었는지 알아낼 때 사용합니다. 1) key가 없으면 - 가상 DOM을 비교하는 과정에서 리스트를 .. ref: DOM [ref:DOM 이란?] jquey에서 이런 식으로 ID값을 가져와 DOM를 직접 핸들링한다. React에서도 DOM를 직접 접근하고 싶을때 사용하는것이 ref DOM 이다. [예시] 컴포넌트에 ref 사용 : 스크롤 박스 조작하기 ( this.scrollBox=ref } } this.scrollBox.scrollToBottom() HTML DOM 에 ref 사용 : 특정 input 에 focus 주기 this.input=ref } /> this.input.focus() : 하단 예시를 보면 input에 입력한 값이 0000이면 텍스트필드의 색상을 lightgreen 아니면 lightcoral 으로 변경한다. 우선 CSS를 만들어준다. [ref 사용 전] [ref 사용 후] 이전 1 다음
