이 글은 <Do it! 리액트 프로그래밍 정석>을 참고하여 작성하였습니다.정리 느낌으로 작성하였으므로 내용이 정확하지 않고 구체적이지 않을 수 있습니다.
pureComponent
Component 클래스를 상속받은 클래스, shouldComponentUpdate()로 state가 갱신되었는지 얕은 비교로 확인, 갱신된 경우에만 실행됨
함수형 컴포넌트
데이터(props,context) 넣으면 출력할 컴포넌트(JSX)가 나옴
함수형 컴포넌트는 state와 생명주기 함수를 사용할 수 없다.
-> 단순한 구조의 UI 컴포넌트를 제작할 때 많이 사용
배열 컴포넌트
배열에 컴포넌트를 넣어 사용
map()함수를 이용하여 배열을 새로 만든다.
배열 컴포넌트의 경우 배열 요소의 개수만큼 반복하므로 성능에 영향을 많이 줍니다. 따라서 배열 컴포넌트에는 키값을 key로 정의해주어야 한다.
다시 출력할 때 key를 참조하여 하나만 출력할 수 있기 때문이다.
render()함수에서 여러개의 JSX 노드 반환하기
render()함수는 트리 구조의 노드를 반환.배열도 가능
여러개의 노드를 반환하고 싶을 때는
<React.Fragment></React.Fragment>를 씌워주면 된다.
<></>도 가능
map()함수가 제일 편하긴 하다
컴포넌트에서 콜백 함수와 이벤트 처리하기
프로퍼티는 상위에서 하위다. 하위에서 프로퍼티를 변경할 때는 프로퍼티 원본을 수정할 수 있는 함수를 하위 컴포넌트에 제공하면 된다.
callback function:정의된 위치에서 실행되지 않고, 이후 특정 상황(이벤트, 다른 함수 호출 등)에서 실행되는 함수
아직까진 App 컴포넌트에선 count 프로퍼티 변경 가능하지만 하위 Counter 컴포넌트에서는 변경 불가한 상태
하지만 increaseCount() 함수를 '프로퍼티'로 전달하면 가능!!
App 컴포넌트에서 Counter 컴포넌트의 프로퍼티로 onAdd 추가
이러면
Uncaught TypeError: this.setState is not a function
이라는 오류가 뜬다.
onadd()에서 참조하는 this의 범위 때문이다.
onAdd()의 this.setState()는 상위 컴포넌트에 정의되어 있기 때문에
bind()함수를 사용해줘야 한다.
Counter 컴포넌트에 onadd를 onadd={this.increateCount.bind(this)} 로 고쳐줘야함
아니면 constructor에 아예
this.increateCount = this.increateCount.bind(this); 라고 쓰면
그냥 this.increateCount만 쓸 수 있다.
bind()는 주로 생성자에 하는데
ex) constructor에다 this.함수.bind(this)하면 다른 곳에 쓸 때 이 객체의 함수인 것으로 인식한다.
컴포넌트에서 DOM 객체 함수 사용하기
DOM 객체 함수 -> ex) window.addEventListener()
컴포넌트에서 시용하려면 DOM 객체를 컴포넌트 변수에 할당해야 한다. 이때 특수 프로퍼티 ref(reference 사용,ref는 document.getElementById()가 반환하는 객체를 반환한다.ref는 콜백 함수 형태로 전달된다.
console.log('enter') 부분에 다음 페이지 목록을 추가하는 코드를 구현하면 스크롤이 내려갈 때마다 자동으로 다음 페이지 목록이 추가되도록 구현할 수 있다.
addEventLister() : 이벤트 감시 함수
getboundingclientrect() : 요소의 위치 값 반환
컴포넌트에서 DOM 이벤트 사용하기
DOM 객체에 이벤트 컴포넌트가 반응하기 위해서는 DOM 이벤트 프로퍼티를 사용해야 한다. 이벤트 프로퍼티는 특수 프로퍼티로 콜백 함수 형태로 전달해 처리한다.
주의사항!!
이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다.
-화살표 함수 문법을 사용하거나 렌더링 부분 외부에 미리 만들어서 전달.
DOM 요소에만 이벤트를 설정할 수 있다.
-div, button, input, form, span등의 DOM 요소에는 이벤트를 설정할 수 있지만, 직접 만든 컴포넌트!에는 이벤트를 자체적으로 설정 불가.
이벤트 이름 | 이벤트 호출 시점 | JSX DOM 이벤트 프로퍼티
click | 클릭될 때 | onclick
submit | 폼 데이터 전송될 때 | onsubmit
mousemove | 엘리먼트 위에서 커서 움직일 때 | onMouseMove
mouseover | 엘리먼트 영역 위로 커서 돌아다닐 때 | onMouseOver
mouseout | 엘리먼트 영역 위에 있던 마우스 커서가 떠날 때 | onMouseOut |
keydown | 키보드 버튼이 눌렸을 때 | onKeyDown
keypress | 키보드 버튼 입력이 완료되었을 때? | onKeyPress
