📒 React Document 메모
React document 정리
리액트는 JSX 문법을 사용한다. ➡️ 자바스크립트 내 HTML 태그들을 끼워넣는 표현 방법
- HTML 친화적이라 쉬움
- 마크업과 로직을 분리하지 않고 UI 작성 가능
- 리액트 컴파일 과정에서 에러 디텍트가 가능함
- 무조건 사용해야 하는 것은 아니지만 권장
Props
- 부모 컴포넌트가 자식 컴포넌트에게 넘겨주는 파라미터 같은 것들, Read-only하므로 변경하고자 할 때 필요한 개념이 State
Components
- element들이 모여 하나의 컴포넌트를 이룸, 반복되는 UI나 기능들을 효율적으로 나타내고자 컴포넌트를 단위로 분리해주는 것이 좋음
function을 class로 변환하는 방법
- React.Component를 상속받는 동일한 이름의 ES6 클래스 생성함
- render() 함수 추가
- 함수의 body를 render 메소드 내부로 옮김
- render()안에 있는 props를 this.props로 변경함
- Function 선언한 부분을 지움
- render 함수는 업데이트가 발생할 때마다 호출됨
- 처음에 DOM에서 렌더되는 것을 mounting이라고 함
- DOM이 제거되면 unmounting
Lifecycle methods
- componentDidMount() : 컴포넌트가 DOM에서 렌더되고 실행
- componentWillUnmount()
state를 변경하고 싶을 때는 다이렉트로 할 수 없고 setState() 함수를 이용해야 함
this.state를 할당할 수 있는 곳은 생성자에서만 가능함
state를 prop으로 보내도 자식 컴포넌트는 state인지 prop인지 구분할 수 없음 => prop으로 생각
React element의 event를 핸들링 =(비슷)= DOM elements 이벤트 핸들링
표현의 차이는 있음 -> 리액트는 camelCase 사용함, string이 아니라 함수로 전달하는 것
리액트에서는 addEventListener를 부를 필요 없음
조건부 렌더링
element를 저장하는 변수를 이용해서 조건에 따라 렌더링하게 구현할 수 있음
조건식 && expression -> && 앞에가 참이면 뒤에꺼 나타내기
return null; -> 렌더링은 되지 않으나 컴포넌트의 라이프사이클 메소드에 영향을 주지 않음 널이여도 디드마운트 호출
Key
키는 리액트가 어떤 아이템이 변경되었고 추가되었는지, 삭제되었는지 확인하는 것을 도움
인덱스는 변할 수 있으므로 인덱스를 키로 사용하는 것은 권장하지 않음
Bind this 해주는 이유 : 클래스 내부 함수는 바인딩하지 않으면 인식 못함
this 써주지 않으려면 ES6처럼 애로우 function으로 선언하면 됨
바인드 함수 : 바인드하는 함수에서 사용하는 this의 대상을 지정해주는 역할
관련 링크 :
https://blueshw.github.io/2017/07/01/arrow-function/
자바스크립트에서의 this는 실행 시의 context를 의미