인프런 파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 강의를 보고 정리한 내용입니다.
리액트
UI 라이브러리 (웹 프론트엔드 및 앱 Native, VR등에서 활용)
UI 데이터를 관리하는 방법을 제공
- 부모 컴포넌트로부터 내려받는 속성값 →
props - 컴포넌트 내부에서 생성/관리되는 상탯값 →
state
UI 데이터 (UI에 연결된 속성값/상탯값)가 변경되면, 해당 컴포넌트의 render() 함수가 호출이 되어서 화면을 자동으로 개싱
- 클래스형 컴포넌트에서는 render()함수가 호출
- 함수형 컴포넌트에서는 그 함수가 매번 호출.
컴포넌트에서 유지해야할 값들은 Hook을 통해 관리
리액트의 핵심 - 선언적 UI (Declarative UI)
UI에 변화를 가할 때마다 일일이 코드를 수행하는 것이 아니라,
- 데이터 (속성값/상탯값)에 맞춰 보여질 UI를 미리 선언해두면
- 데이터가 변경되면, 그 즉시 데이터에 맞춰 UI가 그려집니다.
리액트 개발의 핵심
- UI에 보여질 값 (속성값/상탯값)등을 효율적으로 관리하고, 그 값들의 변경에 맞춰서, UI가 불필요하게 업데이트 되지 않도록 하기
지양하는 패턴
- jQuery에서처럼 DOM에 직접 접근하여 추가/변경/삭제를 하는 방식을 지양함. 필요하다면 할 수는 있음 (ref 사용)
React Element
화면을 담당하며, React 앱의 가장 작은 단위
1
2
3
4
//jsx문법
const reactElement1 = <h1> Hello, React!</h1>
//js문법
const reactElement2 = React.createElement('h1',null,'Hello, React'))
jsx문법에서의 태그는 html 태그처럼 보이지만 react component
React DOM은 React Element와 일치하도록 DOM을 업데이트
Element는 Component에서 화면을 담당
- 컴포넌트의 주요 구성요소: 속성값 (props), 상탯값(state),엘리먼트(element), 그리고 로직
React Component
Component를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나뉨
- 개념적으로 Javascript 함수와 유사
- 속성값을 전달받아, Element를 반환
클래스로 구현하는 컴포넌트가 먼저 지원되었으며, 최근에 함수로 구현하는 컴포넌트를 지원
Class 형태
1
2
3
4
5
6
//class 형태
class Person1 extends React.Component {
render() {
<div>Person: (this.props.name)</div>;
}
}
함수 형태 (비록, 함수이지만 component이기 때문에 대문자로 안쓰면 react가 인식 못 함)
1
2
3
function Person2(props) {
return <div>Person: (props.name)</div>;
}