리액트 부가 기능

axios

axios는 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트이다.

HTTP요청을 Promise 기반으로 처리한다.

API 호출

useEffect를 사용하여 컴포넌트가 처음 렌더링 되는 시점에 API를 요청하면 된다.

주의할 점 : useEffect에 등록하는 함수에 async를 붙이면 안된다.

useEffect에서 반환해야 하는 값은 뒷정리 함수이기 때문이다.

useEffect 내부에서 async/await 를 사용하고 싶다면, 함수 내부에 async 키워드가 붙은 또 다른 함수를 만들어서 사용해 주어야 한다.

API 호출 후 주의할점

데이터를 불러와서, 뉴스 데이터 배열을 map 함수를 사용하여 컴포넌트 배열로 변환할때 신경써야 할 부분이 있다.

map 함수를 사용하기 전, 상태 배열(호출한 데이터) !articles를 조회하여 해당 값이 현재 null이 아닌지 검사해야 한다.

이 작업을 하지 않으면, 아직 데이터가 없을 때, null에는 map함수가 없기 때문에, 렌더링 과정에서 오류가 발생한다. 그래서 흰 페이지만 보이게 된다.

Context API

리액트 16.3v 업데이트 이후에 Context API가 많이 개선되었기 때문에, 별도의 라이브러리를 사용하지 않아도 전역 상태를 손쉽게 관리 할 수 있다.

Consumer

function as a child || Render Props

Consumer 사이에 중괄호를 열어서 그 안에 함수를 넣어 준다. 컴포넌트의 children이 있어야 할 자리에 일반 JSX 혹은 문자열이 아닌 함수를 전달하는 것이다.

Provider

provider을 사용하면, Context의 value를 변경할 수 있다.

동적 Context 사용하기

Context 값 업데이트 하기

가시성 변경자

private 변경자

private

#문자이용


class Square{
  side: number,
  private area: number,
  #perimeter: number

  constructor(s:number){
    this.side = s;
    this.area = this.side*this.side;
    this.#perimeter = this.side * 4;
  }
}

let oSquare = new Square(2)

console.log(oSquare.#perimeter)
console.log(osQuare.area)

비공개 프로퍼티를 외부에서 직접 접근할 수 없다.

비공개 프로퍼티는 오직 정의된 클래스 내에서만 접근 할 수 있다.

인스턴스화한 객체도 비공개 프로퍼티에 직접 접근할 수 없다.

해당 클래스를 상속받은 다른 클래스에서도 상속받은 클래스의 비공개 프로퍼티에 접근 할 수 없다.

상속받은 클래스에서 부모의 프로퍼티에 접근하려면 보호된(protected) 프로퍼티를 사용하자.

protected 변경자

프로퍼티와 메서드를 외부 세계로부터 보호하면서, 자식 클래스에 접근 할 수 있도록 허용한다.

접근자 정의하기. 특별한 접근자(accessor)를 함수에 추가해 할당과 반환 연산의 동작을 제어한다.

다른언어에서는 세터(setter)와 게터(getter)라고 한다.