React (1)

 

React (●'◡'●)

• 자바스크립트로 뷰를 만들기 위한 라이브러리
• SPA(전체 화면을 리렌더링하지 않고 변경된 일부분만을 리렌더링 할 수 있는 컴포넌트 기반의 애플리케이션)
• 출력시스템은 Virtual DOM이라는 개념을 사용함
  • Virtual DOM이란?
  • ( 메모리 상에 가상으로 DOM을 복사해서 현재 화면에 출력된 DOM과 비교를 한 후 변경된 부분만 리렌더링하는 개념)
• 기반지식
• ajax / fetch API / axios (외부 데이터를 가져올 수 있는 부분을 학습해두는 것이 좋음.
• js(기본 확장자)
• jsx (HTML에 사용되는 자바스크립트와 구분하기 위해 사용
• tsx (타입스크립트 문법을 사용한다는 것을 명시할 때 사용)

 

---

• Component
  • 화면을 구성하는 단위
  • View(하나의 화면) > Component(Segment - Control을 1개 이상 모아서 만든 논리적인 화면 구성 단위) > Control(작은 부품 하나)
  • 만드는방법
    1. 클래스로 구성
    • Component라는 클래스로부터 상속을 받은 render라는 함수에 출력할 내용을 리턴하는 형식으로 생성.
    • 멤버 변수 사용이나 수명 주기 메서드를 사용하는 것이 편리함.

    class 이름 extends Component{ 
    render(){ 
             return 출력할내용}
    };
    

    1. 함수로 구성
    • 출력할 내용을 리턴, 클래스로 만드는 것보다 가볍고 속도가 빠름
    • 최근에는 함수로 구성하는 경우가 많다

    function 이름 (){
             return (출력할 내용)};
    
    또는
    
    const 이름 = () =>{
            return (출력할 내용)};
    

  • 만들 때 주의사항
    1. 컴포넌트는 Root가 1개여야 함. 요소가 여러개라면 div, span, <> 태그로 묶어서 표현
    2. React에서는 데이터 원본을 직접 수정하지 않는다. 다른 곳에서 넘겨준 데이터를 복제해 수정한 후 다시 대입하는 형태를 취한다.
• Props (properties)
  • 상위 컴포넌트에서 하위 컴포넌트에게 데이터를 넘겨줄 때 사용하는 개체

  <컴포넌트이름 props이름 = 값...>
  //개수 제한 없음
  
  1. 클래스형 컴포넌트 사용시
  this.props.이름
  
  2. 함수현 컴포넌트 사용시
  const(function) 컴포넌트이름 = (props) => {
                     return ( 출력할 내용 ) }; 
  //모든 props를 하나로 묶어 함수의 매개변수로 이용해 사용
  
  

  • props.children 을 이용해서 상위 컴포넌트에서 태그 안에 삽입한 데이터를 읽어낼 수 있다.
  • 비구조화 할당
    • 자바스크립트는 객체를 분해해서 할당하는 것이 가능 ⇒ 분해해서 할당할 때는 인덱스가 아니라 이름을 가지고 데이터를 할당함.

  // (props.children)이용
  
   const Mycomponent = (props) =>{
      return (<><div>
          나의 컴포넌트 이름은 {props.name} 입니다.
          <p>{props.children}</p>
      </div>
      </>)
  };
  
  -------위 아래 코드 동일 결과 출력------------
  
  // (비구조화 할당)
  
   const MyComponent = ({children, name}) => {
      return(<>
      <div>나의 컴포넌트의 이름은 {name} 입니다.</div>
      <p>{children}</p>
      </>)
  };
  

  • Props의 유효성 검사 기능
    • 작업하는 프로젝트의 규모가 커질 수록 작고 큰 에러가 발생할 확률이 높다. 이를 방지하기 위한 방법으로, PropTypes를 활용하여 타입(type)의 유효성을 검사를 실시한다.
    • 부모로부터 전달받은 prop의 데이터 type을 검사한다. 자식 컴포넌트에서 명시해 놓은 데이터 타입과 부모로부터 넘겨받은 데이터 타입이 일치하지 않으면 콘솔에 에러 경고문이 띄워진다.
    • props 값을 전달 시, 문자열이 아니면 { } 로 감싸야한다. 기본적으로 XML에서는 태그안의 속성은 문자열만 가능하기 때문이다.
• State
  • 컴포넌트가 가질 수 있는 상태
  • props는 상위 컴포넌트에서 하위 컴포넌트에게 데이터를 넘겨줄 때, 읽기 전용으로만 넘겨주는데, 이 때 Component 내부에서 읽고 쓸 수 있는 값을 사용하고자 할때 State를 사용
  • 기본값을 설정할 수 있으며 setter 메서드를 이용해 수정하는 것도 가능
    • state 에 함수 전달
      • state 도 하나의 속성이고 자바스크립트는 함수도 하나의 데이터이므로 state에 함수를 전달하는 것이 가능
      • import React, {Component} from 'react'; class StateComponent extends Component{ constructor(props){ //상위클래스의 생성자 호출 super(props); //state생성 this.state = {number:0} } render() { return( <> <p>숫자:{this.state.number}</p> <button onClick={(e) => { this.setState( {number:this.state.number+1}, () => { console.log('state 의 값이 변경됨'); console.log(this.state); } ) }}>증가</button> </> ) } } export default StateComponent; =>setState에 2번째 매개변수로 함수를 전달하면 state 설정을 변경한 후 호출되는 함수를 설정할 수 있다. 한 곳에서만 사용하는 데이터가 있는 경우, 로컬의 데이터를 업데이트 하고 업데이트가 끝나면 서버에 업로드를 하는 형태를 만들 때 유용하게 사용할 수 있다.
  • 1. 클래스형 컴포넌트의 경우 초깃값 설정은 constructor(props) 메서드에서 수행 this.state = {state 이름: 값,.......} 2. 클래스형 컴포넌트의 경우 값의 수정은 setState 메서드를 이용 this.setState({state이름:값,....})
  • State 사용시주의사항
    • state를 수정할 때는 클래스형 컴포넌트에서는 setState를 이용
    • 함수형 컴포넌트에서는 useState 함수를 이용
    • 객체 나 배열을 수정할 때는 복사본을 만들고 수정해야 한다.
    • let object = {'name':'adam', 'age':29}; //name 수정 - object 의 속성을 직접 수정 [object.name](<http://object.name/>) = '군계'; //기존 object 의 내용을 복제해서 name을 수정 const copyObject = {...object, 'name':'군계'}; let ar = [1, 2, 3]; //배열에 직접 추가 ar.push[4]; //배열을 복제해서 추가 let copyAr = ar.concat(4); //배열에서 데이터를 삭제하거나 변형을 가하고자 할 때는 filter 나 map 함수 이용 filter 나 map은 작업을 수행한 후 새로운 배열을 생성
• 참고링크
  • https://velog.io/@duplicareus/1126-리액트-학습-일지
  • https://doqtqu.tistory.com/210
  • https://velog.io/@youngminss/React-컴포넌트-생명주기-메서드