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