프론트엔드 8주 완성 with React : react 강의 7주차

공식 문서를 보는이유

라이브러리는 만드는 사람이 있다.

그들이 만든 목적과 도구의 사용법을 정리해뒀다.

책에서도 거의 공식문서의 내용을 담는다.

(새로운 기술/ 언어에 대한 첫 한국어 책의 경우 대부분임)

친절 할 수도있고, 친절하지않을수도 있다.

한국어 번역이 있을수도있고 없을 수도 있다.

Tutorial이 있을수도 있고 없을 수도 있다.

리액트는 친절하고 한국어 번역도 많이 있고 tutorial도 있다.

 

공식문서를 보는 이유와 방법

이미 여러차례 봐왔는데 MDN과 React Documnet 

제각각의 흐름이 있다. 

 

공식문서를 보는 방법은 목적에 따라 나뉜다.

바로 써보는 것과 이해해보는것

 

써보기만하고 이해하지 않을 수 있다.

써보지않고 이해만 해볼 수도 있다.

써보면서 이해 할수도있다.

이해먼저하고 써볼 수도있다.

 

맛보기를 했으니(써보았으니) 토픽별로 훑어보며 이해해본다.

 

문서 + 예제 적용

 

계속 연습과 반복

리액트를 시작으로 여러 라이브러리들의 공식문서를 보면서 바로 써보기/ 이해해보기

두가지 방식을 섞어서 연습 반복해보기

 

공식문서를 보는 이유와 방법

공식문서 -> 라이브러리 설명서

공식문서 읽기 -> 리액트로 시작후 반복 숙달

 

이때까지는 codesandbox를 이용했다.

좋은점도 있엇고 불편한 점도 있었다.

이제는 개발환경을 꾸려보자

Visual Studo Code (aka, vscode)

javascript로 만들어진 IDE(통합 개발 환경)

Visual Studo Code Extensions

IDE를 풍성하게 해주는 여렁 기능들이 있다.

구글링을 통해서 필요한 설정을 해볼것

 

환경설정

Create React App 

리액트 앱 만들어보기

 

Node 설치 

로컬에서 리액트 앱이 돌아갈수 있도록 해주는 환경

 

TMI

npm(node package manager)도 자동으로 설치됨

npm이 설치되면 npx(node package runner)도 자동으로 설치됨

 

환경설정

vscode -> IDE

node, npm, npx ->  Create React App 

 

JSX

JSX -> React.createElement 간편 표현식

 

Props

Components and Props

개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.

 

함수 컴포넌트와 클래스 컴포넌트

컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것입니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다. 이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 “함수 컴포넌트”라고 호칭합니다.

또한 ES6 class를 사용하여 컴포넌트를 정의할 수 있습니다

 

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

React의 관점에서 볼 때 위 두 가지 유형의 컴포넌트는 동일합니다.

 

컴포넌트 랜더링

이전까지는 DOM 태그만을 사용해 React 엘리먼트를 나타냈습니다.

const element = <div />;

React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있습니다.

const element = <Welcome name="Sara" />;

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props”라고 합니다.

다음은 페이지에 “Hello, Sara”를 렌더링하는 예시입니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

1. <Welcome name="Sara" /> 엘리먼트로 ReactDOM.render()를 호출합니다.
2. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출합니다.
3. Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환합니다.
4. React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트합니다.

※주의: 컴포넌트의 이름은 항상 대문자로 시작합니다.

React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리합니다. 예를 들어 <div />는 HTML div 태그를 나타내지만, <Welcome />은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 합니다.

 

 

Props

Props -> 컴포넌트에 전달되는 단일객체

순수함수처럼 동작 -> Props자체를 수정해서는 안됨

컴포넌트 합성 -> 여러 컴포넌트를 모아서

컴포넌트 추출 -> 여러곳에서 사용되거나 복잡한 경우

 

State and Lifecycle

엘리먼트 렌더링에서는 UI를 업데이트하는 한 가지 방법만 배웠으며, 렌더링 된 출력값을 변경하기 위해 ReactDOM.render()를 호출했습니다.

 

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

이 섹션에서는 Clock 컴포넌트를 완전히 재사용하고 캡슐화하는 방법을 배울 것입니다. 이 컴포넌트는 스스로 타이머를 설정할 것이고 매초 스스로 업데이트할 것입니다.

시계가 생긴 것에 따라 캡슐화하는 것으로 시작할 수 있습니다.

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

그러나 여기에는 중요한 요건이 누락되어 있습니다. Clock이 타이머를 설정하고 매초 UI를 업데이트하는 것이 Clock의 구현 세부사항이 되어야 합니다.

이상적으로 한 번만 코드를 작성하고 Clock이 스스로 업데이트하도록 만들려고 합니다.

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

이것을 구현하기 위해서 Clock 컴포넌트에 “state”를 추가해야 합니다.

State는 props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어됩니다.

 

함수에서 클래스로 변환하기

다섯 단계로 Clock과 같은 함수 컴포넌트를 클래스로 변환할 수 있습니다.

1. React.Component를 확장하는 동일한 이름의 ES6 class를 생성합니다.
2. render()라고 불리는 빈 메서드를 추가합니다.
3. 함수의 내용을 render() 메서드 안으로 옮깁니다.
4. render() 내용 안에 있는 props를 this.props로 변경합니다.
5. 남아있는 빈 함수 선언을 삭제합니다.

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Clock은 이제 함수가 아닌 클래스로 정의됩니다.

render 메서드는 업데이트가 발생할 때마다 호출되지만, 같은 DOM 노드로 <Clock />을 렌더링하는 경우 Clock 클래스의 단일 인스턴스만 사용됩니다. 이것은 로컬 state와 생명주기 메서드와 같은 부가적인 기능을 사용할 수 있게 해줍니다.

 

클래스에 로컬 State 추가하기

세 단계에 걸쳐서 date를 props에서 state로 이동해 보겠습니다.

1. render() 메서드 안에 있는 this.props.date를 this.state.date로 변경합니다.

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

    2.초기 this.state를 지정하는 class constructor를 추가합니다.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

여기서 어떻게 props를 기본 constructor에 전달하는지 유의해주세요.

  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야 합니다.

    3.<Clock /> 요소에서 date prop을 삭제합니다.

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

타이머 코드는 나중에 다시 컴포넌트로 추가하도록 하겠습니다.

결과는 다음과 같습니다

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

 

정리

State

컴포넌트 생명주기

 

React.Component

constructor -> state 초기화 및 메서드 바인딩

componentDidMount -> Dom 노드 초기화 및 데이터 fetch

componentWillUnmount -> 타이머 제거 및 요청취소 및 구독해제

Functional Component -> hook으로 대부분 구현 가능

 

이벤트

SynthenticEvent

합성 이벤트 -> 인터페이스 같지만 직접 대응되지않음

Bublle / Capture -> Capture > target > Bubble

return false -> e.preventDefault()해줘야함

 

조건부 랜더링

Conditinal Rendering

if -> if(condition){return A} else { return B}

&& -> condition && A, falsy 주의

삼향연산자 -> condition ? A : B

아예 안그러고 싶은 경우 -> return null

 

List

Lists and Keys

map -> 배열의 개별 요소를 순회

default key -> 안주면 react는 index를 쓴다(워닝 O)

고유성  -> 형제 사이에서만 고유하면 됨

ket props -> key는 props로 넘어가지 않음

 

Forms

Controlled Component  -> input의 value를 state로 관리

다중 입력 -> event.target.name

Uncontrolled -> Component form element 자체의 내부 상태 활용

defaultValue, ref -> 기본값 / value 확인