[React] 공식문서의 주요개념 간단한 설명

이번 포스팅에서는

https://ko.reactjs.org/docs/getting-started.html

 

시작하기 – React

 

React 공식 홈페이지에서 나와있는 주요개념에 대해

간단하게 개념정도만 설명하도록 하겠습니다.

 

1. JSX

 

JSX 는 Javascript XML 의 줄임말입니다.

 

const element = <h1>Hello, world!</h1>;

 

위의 예시는 HTML도 아니고 문자열도 아닙니다.

JSX라고 합니다. 값을 표현할때에는 {} 중괄호 안에서 표현하며

const element = <img src={user.avatarUrl} />;

 항상 태그를 닫아주셔야 합니다.

 

※ 공식 홈페이지에서는

※ ES6 및 JSX 코드가 올바르게 표시되도록 편집기에 “Babel” 언어 설정을 사용하는 것을 권장합니다.

라고 나와있습니다. <script></script>를 통해 babel CDN을 불러와서 사용을 권장합니다!

 

2. Component

 

React에서 말하는 Component는 Element 모음, React를 구성하는 작은 블록 이라고 생각하시면됩니다.

하나의 Component는 , 단하나의 상태(State)를 가질수 있으며 상태에 따라서 Element가 바뀝니다.

 

3. Props

 

Props는 Properties의 약자이고

데이터(값)를 전달할때 사용됩니다.

전달할때의 방향은 아래로( 항상 자식 Component에게만) 갑니다.

 

4. State

 

Element에 표현할 데이터를 모아주는 변수 입니다.

처음 Element가 생성될때에, State안에 변수들을 설정할수 있습니다.

 

5. 생명주기(Life Cycle)

 

컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생합니다.

 

즉 엘리먼트가 생성되거나 , 상태가 변경되거나 , 삭제되거나 할때마다

 

- componentDidUpdate

- componentDidMount

- componentwillunmount

 

추상메서드가 실행되는데 이걸 생명주기라고합니다.

 

6. 이벤트

 

이벤트 처리할때 주의해야될점 몇가지가 있습니다.

 

(1) onSubmit 진행시 e.preventDefault()를 명시적으로 호출해주어야 합니다.

 

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

 

 

---

 

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다.
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

 

 

(2) ##JSX 콜백 안에서 this의 의미에 대해 주의해야 합니다. 

JavaScript에서 클래스 메서드는 기본적으로 바인딩되어 있지 않습니다. 

this.handleClick을 바인딩하지 않고 onClick에 전달하였다면, 함수가 실제 호출될 때 this는 undefined가 됩니다.

이는 React만의 특수한 동작이 아니며, JavaScript에서 함수가 작동하는 방식의 일부입니다.

 일반적으로 onClick={this.handleClick}과 같이 뒤에 ()를 사용하지 않고 메서드를 참조할 경우, 

해당 메서드를 바인딩 해야 합니다.

bind를 호출하는 것이 불편하다면, 이를 해결할 수 있는 두 가지 방법이 있습니다. 

콜백을 올바르게 바인딩하기 위해 퍼블릭 클래스 필드 문법을 활용할 수 있다.##

 

이벤트 처리에 대해 공식문서를 뭐라고 설명해야할지 막막해서 일단 가져왔습니다.

결론은 이벤트 처리를할때 bind를 호출해 this를 설정해주어야 한다는겁니다.

bind하는방법이 싫다면, onClick={this.handleClick} 에서 익명함수를 호출하여

사용하거나 , 화살표함수를 사용하여 bind를 작성하지 않는방법이 있습니다.

 

 

7. 조건부 랜더링

 

변수를 선언하고 , if 조건문으로 랜더링 할때에 더 좋은 방법들을 소개해주고있습니다.

삼항연산자 혹은 논리연산자(&&)를 사용하면 더좋다고 말하고있습니다..

(이건 공식문서에 잘나와있어서 패스하겠습니다)

 

 

8. 리스트

 

같은 엘리먼트를 여러번 사용할때에 배열에 담아서 사용해도 출력이 됩니다.

데이터들을 배열메서드인 map을 이용해서 잘 다듬어 배열내용을 변경할줄

알면 손쉽게 사용할수 있다고 말하고있습니다!

 

9. 폼(Form)

 

React의 Form은 이벤트와 State만 잘알면 해결이 수월합니다.

단, Form 엘리먼트에서 submit 이벤트가 어떻게 돌아가는지

잘 인지를 하고계셔야합니다.

React는 Single Page Application 입니다. Form 엘리먼트를

잘못이해하시고 화면이 Reloading 되거나 페이지가 바뀌어 버리면

State(상태)가 리셋 되므로 각별히 주의하셔야합니다.

** e.preventDefault()를 왜 호출하는지 여기서 아셔야합니다 **

 

10. State 끌어올리기

 

상태끌어올리기는 부모 컴포넌트와 , 자식 컴포넌트를 구별 잘하셔야합니다

( 헷갈린다면 Tree를 그려서 이해하세욥 )

상태는 Component 마다 있는것입니다.

React가 라이브러리로 처리해준게 아니라 Javascript 기본적인

개념을 복합적으로 사용해서 된다 라는 사실을 인지해야합니다.

 

즉 ,

(1) 부모컴포넌트에서 본인의 상태를 바꾸는 함수를 구현하고

(2) 해당 함수를 자식컴포넌트에게 Props로 전달 하고

(3) 자식 컴포넌트는 부모 컴포넌트에서부터 받은 함수를 실행 

하면 됩니다.

 

---

오늘은 공식문서에 있는 주요 개념을 정말 간단하게

알아보았습니다. 다음포스팅에는 실습예제로 돌아오겠습니다.