React - class 형 Component 제작 기본 패턴

React의 class 형 Component 제작 기본 패턴

React란?

• 코드 양이 많을 경우 한 눈에 코드가 들어오지 않고 혼란스러운 상태를 초래한다. 이를 하나의 태그로 줄여주는 역할을 하는 것이 React이다.

• 웹브라우저는 이세상에 react라는 기술이 있는지 모른다. 왜냐하면 react는 그냥 사람들이 짜는 코드이고 react가 최종적으로 웹브라우저한테 html 코드를 공급해주기 때문이다.

• react는 JSX 언어이다

  • React의 js에서 짜는 코드들은 유사 Javascript이다. react에서 짠 코드를 javascript로 작성할 경우 에러가 발생한다. 왜냐하면 js의 경우 tag를 표현하는 부분들을 따옴표 등을 활용하여 잘 작성해야 하는데 react의 경우 그냥 tag를 작성해도 잘 동작하기 때문이다. 그래서 react는 javascript와 거의 유사하지만 tag들을 그대로 작성할 수 있도록 한 JSX언어이다(페이스북에서 만든 언어)
  • JSX 문법으로 작성 시 create react app이 알아서 javascript 언어로 converting 해준다

• 예시

  <header>
              <h1>WEB</h1>
              world wide web!
  </header>

  ↓

  class Subject extends Component {
  render() {
              return (
                  <header>
                      <h1>WEB</h1>
                      world wide web!
                  </header>
              );
          }
  }
  
  class App extends Component {
  render() {
              return <Subject></Subject>;
          }
  }

  컴포넌트

• React의 가장 중요한 인프라

• 방대한 양의 코드 정리정돈의 도구

  • 집에 물건이 널부러져 있을 때 그것들을 캐비닛 같은 곳에 정리 정돈해서 감추고 이름을 붙여주면 이름만 신경쓰게 된다.
  • 코드도 마찬가지로 컴포넌트 이름에 집중하도록 함으로써 복잡도를 획기적으로 낮출 수 있다. 그로 인해 많은 복잡도에 도전할 수 있는 기회가 생긴다.

• 컴포넌트를 만들 때에는 그 컴포넌트는 반드시 하나의 최상위 태그로 시작해야 한다.

class형 컴포넌트

• 객체지향
• react의 Component라는 react가 가지고 있는 class를 상속해서 새로운 class를 만듦. 그리고 그 class는 render라는 method를 가지고 있다.
• class 이름은 대문자로 시작해야 함
• 예시

  class App extends Component {
        render() {
            return (<div className="App">Hello, React!!!</div>);
        }
  }

  Tips

• semantic tag : react와 아무 상관없는 html5의 스펙에 해당한다. 웹페이지는 대부분 header, navigation, 본문, footer, article 등의 영역들로 이루어져 있는 데 이러한 것들을 의미론적으로 정의해 놓는 태그들을 의미한다. 아무런 기능을 하진 않지만 코드들이 의미론적으로 어떠한 영역에 속해있는지 알 수 있다.
• public directory : create react app에서 npm run start 혹은 npm start를 했을 때 파일을 찾는 document root
• TOC : Table Of Content, 목차라는 뜻