React- 리액트 교과서 2장 학습내역(리액트 첫걸음)

React:

리액트 교과서 2장 (리액트 첫걸음)

이 글은 리액트 교과서 저서를 읽고, 중요 부분을 발췌해 기록한 학습내역입니다.

| 시작하기에 앞서

엘리먼트는 컴포넌트의 인스턴스이며, 컴포넌트 클래스라고도 한다. 이러한 엘리먼트를 어떻게 그리고 왜 사용하는지 살펴보자.

| 엘리먼트 중첩

• 계층적 방식으로 더 복잡한 구조를 만드는 방법은 엘리먼트를 중첩하는 것이다.

• ReactDOM.render()에는 하나의 React 엘리먼트만 인자로 전달할 수 있다는 점이 중요하다. -> 이점때문에, 다양한 엘리먼트들을 보여주기위해 div 태그로 감싸주는 이유이다. 내 생각엔 이 부분이 제일 중요한 점인것 같다.

• 동일한 DOM 계층에 h1요소 두개를 렌더링해여 하는 경우에 문제가 발생한다. 이경우 아래 그림처럼 시각적으로 영향을 끼치지 않는 <div>나 <span>을 컨테이너로 사용하는 것이 일반적으로 좋은 선택이다.

• createElement()에 전달하는 매개변수의 수는 제한이 없다. 두번째 매개변수 이후의 모든 매개변수는 자식 엘리먼트가 된다. 위의 그림같은 경우는 h1은 형제관계이다. 이점을 이용해 아래와 같이 <div>와 자식엘리먼트 <h1> 두개를 생성하였다.
  

let h1=React.createElement('h1',null,'Hello world!')
ReactDOM.render(
    React.createElement('div',null,h1,h1),
    document.getElementById('content')
)

• createElement()의 첫번째 매개변수로 문자열만 입력했다. 사실 첫 번째 매개변수로 두가지 자료형을 입력할 수 있다.

1. 문자열로작성한 일반적인 HTML 태그, 예를 들면 'h1','div','p'처럼 화살괄호가 없는 문자열이다. 이름은 소문자로 작성한다.

2. React 컴포넌트 클래스 객체. React 컴포넌트 클래스의 이름은 대문자로 시작한다.

| React 컴포넌트 클래스 생성

• 리액트 엘리먼트를 중첩하고 나면, 곧 입력할 엘리먼트가 굉장히 많다는 , 문제를 발견하게 된다.

• 따라서, 컴포넌트 기반 아키텍쳐를 활용해야 하는것이다. 컴포넌트 클래스를 이용하면 기능을 느슨하게 결합된 부분으로 분리하여 코드를 재사용할 수 있는 것이다.

• 컴포넌트 클래스는 컴포넌트라고 부르기도 한다. (웹 컴포넌트와 혼동 x)

• 아래는 <div>요소를 직접 렌더링 하는대신 사용자 정의 컴포넌트 클래스를 사용하는 경우이다.

• ES6문법을 이용하면 React.Component 클래스를 상속받아서 React 컴포넌트 클래스를 생성할 수 있다. 위와 같은 HelloWorld 컴포넌트를 생성하는 경우에는 class HelloWorld extends React.Component 라고 작성한다.

• 그리고 중요한점은 새로운 컴포넌트 클래스를 구현할때는 render() 메서드를 반드시 작성해야 하는점이다.

• 아래 첨부 그림은 리액트 컴포넌트 클래스를 생성하고 렌더링하는 예제이다.컴포넌트 클래스를 이해할때 아주 중요한 개념인것 같다.

• ReactDOM.render()와 유사하게 컴포넌트 클래스의 render() 메서드는 엘리먼트 하나만 반환한다. 여러개의 동일 계층 엘리먼트를 반환하려면, <div>나 <span> 요소처럼 스타일에 영향을 주지않는 엘리먼트로 감싸야 한다. 

• 컴포넌트 재사용성의 힘을 알수있는 예제가 바로 아래예제이다. HelloWorld 컴포넌트를 여러번 노출해야 한다면 아래와 같이 여러번 재사용 할수있다. 컴포넌트 자체가 제공하는 라이프사이클 이벤트, 상태, DOM 이벤트 등 여러가지 기능을 활용하면, 독립적이면서도 애플리케이션의 다른 영역과 함께 잘 동작하는 컴포넌트를 만들 수 있다.

 ReactDOM.render(
    React.createElement(
        'div',
        null,
        React.createElement(HelloWorld),
        React.createElement(HelloWorld),
        React.createElement(HelloWorld)
    ),
   document.getElementById('content')
 )

| React 속성 사용하기

• React 컴포넌트의 속성은 React 선언형 스타일의 기초이다. 속성은 엘리먼트 내의 변경할 수 없는 값이다. (개인적으로 react의 속성부터가 리액트를 본격적으로 시작하는것이라 생각된다 ㅎㅎ)

• 부모 컴포넌트는 자식의 생성 시점에 속성을 할당한다. 자식 엘리먼트에서는 속성을 수정하지 않아야 한다.

• React의 속성은 HTML 속성을 작성하는 것과 매우 비슷하다고 한다. 리액트 속성을 작성하는 것은 HTML 속성을 작성하려는 목적도 있지만, 엘리먼트의 속성을 코드에서 원하는 대로 사용하는 것도 가능하다. 정리하면 아래와 같다. (리액트로 개발을 시작하게 되면 주구장창 볼 this.props.. 와 같은것에 해당하는 것이 react 속성이다)

1. 일반적인 HTML요소의 속성: href, title, style, class
2. React 컴포넌트 클래스의 자바스크립트 코드에서 this.props의 값, 예를 들어 this.props.example 과 같은 임의의 값

• 위에서 말한 this.props객체를 render() 메서드에서 입력하여 렌더링하거나 코드에서 활용할 수 있다. 이방법을 이용해, 같은 클래스의 서로 다른 인스턴스에 각각 다른 데이터를 넘겨줄수 있다.이와 같이 컴포넌트를 재사용하게 되는것이다. 위에서 말한 재사용의 힘이라는 것이 this.props를 통해 더더욱 증명되고 있다고 생각한다!

+ 추가정보

this.props를 불변객체로 만드는것은 내부적으로 Object.freeze()를 이용한다고 한다!

• 속성의 기능을 활용해서 속성 값에 따라 렌더링하는 엘리먼트를 아예 다른 모습으로 바꿀수도 있다. 그예는 아래와 같다.
  

render(){
  if(this.props.heading) return <h1>Hello<h1>
  else return <p>Hello</p>
}

• 리액트에서 속성으로 활용하는 값들중 표준 HTML 속성과 일치하는 값들은 렌더링해주고 그렇지 않은 속성들은 렌더링 되지 않는다. 그것이 아래에 나와있다. HelloWorld 엘리먼트는 id, title, frameworkName이라는것을 속성으로 가지는데 html 표준속성인 id와 title은 렌더링이 되지만, frameworkName은 렌더링 되지 않는다. 하지만 중요한점은 React 16버전 이상부터는 표준이 아닌 html속성도 렌더링하도록 변경되었다고 한다... 하핳 

• this.props 객체의 키는 createElement()의 두번째 매개변수로 전달한 객체의 키와 같다. 위의예에서는 this.props의 키로 id, frameworkName, title이 있을것이다. 그리고 React.createElement()의 두번째인자로 전달하는 키-값 쌍의 수는 제한이 없다.'

• 그리고, 컴포넌트의 모든 속성을 자식 엘리먼트에게 넘겨주는 것도 가능하다. 컴포넌트에 어떤 속성이 전달되는지 확실하지 않을때 매우 유용한 방법이라고 한다. 그 예는 아래와 같다.

class HelloWorld extends React.Component{
  render(){
    return React.createElement(
    'h1',
      this.props, //여기서 자식에게 props를 다 넘겨주고있다.
      'Hello' + this.props.frameworkName+'world!'
    )
  }
}

| 마치며

지금까지는 대부분 이론적인 내용이라 지루할 수 있지만, 리액트로 개발할때 있어서 상태라는 개념과, 재사용성 등의 특징등은 꼭 필요한 필수개념이기에 꼭 제대로 짚고 가야하는 부분이라 생각된다.

• 리액트 엘리먼트를 중첩하여 자식엘리먼트로 추가하려면 createElement()의 세번째 인자로 계속해서 전달하면 된다.
• 리액트 엘리먼트를 생성할때 사용자 정의 컴포넌트를 사용한다.
• 속성을 사용하여 리액트 엘리먼트의 렌더링 결과를 바꾼다.
• 부모 컴포넌트는 자식엘리먼트에 속성을 전달할 수도 있다.
• React 컴포넌트를 통해 컴포넌트 기반 아키텍쳐를 구현할 수 있다.