React 기초 (Component, Props, State)
React 란?
- ES6를 사용하는 자바스크립트 기반 라이브러리
- DOM과 Virtual DOM을 비교하여 전체를 비교하는 것이 아니라 바뀐 값만 화면을 렌더링 하여
화면 호출 속도 향상
- 각 Component로 화면을 구성한다
- 화면 구성 시 화면 태그를 반드시 열고 닫아야 한다
Ex)
<div,span,p>
~~
~~
~~
</div,/span,/p>
- 화면 태그를 열고 닫지 않으려면 <Fragement> </Fragement>라이브러리 사용
<Fragement>
~~
~~
~~
</Fragement>
1. Component
- UI를 구성하는 기본 단위
- 화면 전체가 될 수도 있고 기능 단위로 Component를 구성할 수 있다.
1-1) Class 형 컴포넌트
- 일반적으로 생성되는 컴포넌트
Ex) class 컴포넌트명 extends Component {
props,state,route,axios,lifecycle 등등
}
1-2) 함수형 (Function) 컴포넌트
- 단순한 뷰잉을 위한 속도 개선형 컴포넌트
- const 컴포넌트명 = ({ 변수 }) => {
return <div> 내용 { 변수 } </div>
}
2. Props,State
- Component 간 데이터를 전달하는데 필요한 변수 선언 방식
- Props와 State의 상호 연관 관계 파악 중요
2-1) Props
- 현재 컴포넌트가 생성되고 초기에 가지고 있는 변수의 값
- Props의 값은 현재(자신)의 Component에서 변경할 수 없다
- 상위(부모) Component에서 정의한 Props가 하위(자식) Component에 State로 들어감
EX) • 상위(부모) Component (Parent)
constructor(props){
this.state = {
parentName = "이영준"
parentAge = 27
}
}
<Children
name = {this.state.parentName}
age = {this.state.parentAge} />
• 하위(자식) Component (Children)
Children Props값
this.props.name 은 "이영준"
this.props.age 은 27
2-2) State
- 값이 내부에서 변경될 수 있는 값을 가지고 있다
- 값 변경 시 이벤트 안에 this.setState로 변경해주어야 함
constructor(props){
this.state = {
parentName = "이영준"
parentAge = 27
}
}
handleClickEvent = () => {
this.setState = {
parentName = "이영준 001"
parentAge = 88
}
}
<Label type = "text" onClick = {this.handleClickEvent} />
기존 컴포넌트가 가지고 있는 State 값
this.state.parentName = "이영준"
this.state.parentAge = 27
라벨 클릭 시 컴포넌트가 가지고 있는 State 값
this.state.parentName = "이영준 001"
this.state.parentAge = 88