[React] Ch 02

Study/React

김만재 2023. 8. 11. 16:03

* 이 글은 강의를 들으며 개인적으로 정리하고 기록하기 위한 글입니다.

* 강의명 ) 프론트엔드 개발 초격차 패키지 Online

index.html 하나만 사용하는 SPA에서 페이지 전환(브라우징)은 HTML5의 History API를 사용. 자바스크립트 영역에서 History API를 이용해서 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동

History.back()	세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드. 브라우저의 뒤로 가기를 누르는 것과 같은 효과를 냄
History.forward()	세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드. 브라우저의 앞으로 가기를 누르는 것과 같은 효과를 냄
History.go()	특정한 세션 기록으로 이동하게 해주는 비동기 메서드. 1을 넣어 호출하면 바로 앞 페이지로, -1을 넣어 호출하면 바로 뒤 페이지로 이동함
History.pushState()	주어진 데이터를 세션 기록 스택에 넣음. 직렬화 가능한 모든 JS객체를 저장하는 것이 가능함
History.replaceState()	최근 세션 기록 스택의 내용을 주어진 데이터로 교체함

자바스크립트의 확장 문법. 화면에서 UI가 보이는 모습을 나타내줌
JSX를 이용하면 UI를 나타낼 때 자바스크립트(logic)와 HTML 구조(Markup)를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있음

리액트에서 화면을 그리는 방식은 React.createElement API를 사용해서 엘리먼트를 생성한 후 이 엘리먼트를 In-Memory에 저장하고, ReactDOM.render 함수를 사용해서 실제 웹 브라우저에 그려줌.
JSX는 createElement를 쉽게 사용하기 위해 사용함. 모든 UI를 만들 때마다 createElement를 사용해서 컴포넌트를 만들 수는 없기 때문에 JSX를 사용한 후 그걸 babel이 다시 createElement로 바꿔 사용함.

컴포넌트에 여러 엘리먼트 요소가 있을 때 부모 요소로 감싼 후 return 해줘야 함 → 두 개 이상은 리턴할 수 없기 때문
- 이 때 의미 없는 <div>태그를 사용을 피하기 위해 <React.Fragment>태그나 <>빈 태그를 이용할 수 있음 → DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화 할 수 있게 됨

ES7+ React/Redux/React-Native snippets

Props: Properities의 줄임말. 상속하는 부모 컴포넌트로부터 자식 컴포넌트에 데이터 등을 전달하는 방법
Props는 읽기 전용(immutable)으로 자식 컴포넌트 입장에서는 변하지 않음 → 변하게 하려면 부모 컴포넌트에서 state를 변경시켜줘야 함

class User {
	constructor(name) {
		this.name = name;
	}

	sayHi() {
		alert(this.name);
}

let user = new User("John");
user.sayHi();

constructor(생성자)를 사용하면 인스턴스화된 객체에서 다른 메서드를 호출하기 전에 수행해야 하는 사용자 지정 초기화를 제공할 수 있음
클래스를 new를 붙여서 ( new User(”John”) ) 인스턴트 객체로 생성하면 넘겨받은 인수와 함께 constructor가 먼저 실행됨. 이때 넘겨받은 인수인 John이 this.name에 할당됨

JS에서 super 키워드는
1. 자식 클래스 내에서 부모 클래스의 생성자를 호출할 때 사용
2. 자식 클래스 내에서 부모 클래스의 메소드를 호출할 때 사용
super 이후에 this 키워드
- 생성자에서는 super 키워드 하나만 사용되거나 this 키워드가 사용되기 전에 호출되어야 함
  - 부모 클래스의 생성자를 호출하기 전에 this.name을 사용하려고 하면 문제가 되기 때문 → React에서 this.state를 생성자에서 정의할 때 super가 먼저 와야 하는 이유도 이와 같음
React에서 super에 props를 인자로 전달하는 이유
- React.Component 객체가 생성될 때 props 속성을 초기화하기 위해 부모 컴포넌트에게 props를 전달
- 생성자 내부에서도 this.props를 정상적으로 사용할 수 있도록 보장하기 위해서

Props
- 상속해야하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법
- 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않음
- → 변하게 하려면 부모 컴포넌트에서 state를 변경시켜줘야 함

State
- 부모 컴포넌트에서 자녀 컴포넌트로 데이터를 보내는 게 아닌 해당 컴포넌트 내부에서 데이터를 전달
- → 예를 들어, 검색창에 글을 입력할 때 글이 변하는 것은 state를 바꿈
- 변경 가능(mutable)
- state가 변하면 re-render됨