📒 React Document 메모

 

React document 정리

 

리액트는 JSX 문법을 사용한다. ➡️ 자바스크립트 내 HTML 태그들을 끼워넣는 표현 방법

• HTML 친화적이라 쉬움
• 마크업과 로직을 분리하지 않고 UI 작성 가능
• 리액트 컴파일 과정에서 에러 디텍트가 가능함
• 무조건 사용해야 하는 것은 아니지만 권장

 

Props

- 부모 컴포넌트가 자식 컴포넌트에게 넘겨주는 파라미터 같은 것들, Read-only하므로 변경하고자 할 때 필요한 개념이 State

 

Components

- element들이 모여 하나의 컴포넌트를 이룸, 반복되는 UI나 기능들을 효율적으로 나타내고자 컴포넌트를 단위로 분리해주는 것이 좋음

 

function을 class로 변환하는 방법

1. React.Component를 상속받는 동일한 이름의 ES6 클래스 생성함
2. render() 함수 추가
3. 함수의 body를 render 메소드 내부로 옮김
4. render()안에 있는 props를 this.props로 변경함
5. 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/

https://velog.io/@kyusung/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B5%90%EA%B3%BC%EC%84%9C-React%EC%97%90%EC%84%9C-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%8B%A4%EB%A3%A8%EA%B8%B0

 

자바스크립트에서의 this는 실행 시의 context를 의미