📖React 시작, 배운것들 기록

 

 

Javascript와 React를 병행해서 공부하기 시작했다

 

잘은 모르지만 React는 프론트엔드 개발자에게 필요한 것이라고 들었다

 

생활코딩님의 강좌들을 보며 배운것들을 기록하려고 한다

 

 

 

리액트의 필요성

 

페이지를 구성하는 요소는 HTML이다. 근데 내가 만드는 것처럼 간단한 웹페이지는 금방 

쉽게 파악 할 수 있다. 하지만 좀 더 많은 정보들을 담은 페이지 일수록 그만큼 html 코드양도 많아지고

개발자는 분석하기 더욱 더 어려워진다. 

이때 React가 🌟을 발휘한다!

 

예를 들어서

<header>
	<h1> WEB </h1>
    	World Wide WEB!
</header>

<nav>
        <ul>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">JavaScript</a></li>
        </ul>
</nav>
<article>
        <h2>HTML</h2>
        HTML is HyperText Markup Language.
</article>

로 구성된 html이 있다

지금은 한눈에 구조를 파악할 수 있지만 <header>, <nav>, <article>에 각각 천만 줄의 코드가 있다고 가정해보자

그러면 가독성도 현저히 떨어지고 정말 나같으면 하기 싫어질 것이다...👎

 

이때 리액트로 

class App extends Component {
  constructor(props){ //초기화 담당
    super(props);
    this.state = {
      subject: {title: 'WEB', sub: 'World Wide Web!' },
      contents: [
        {id: 1, title: 'HTML', desc: 'HTML is for information'},
        {id: 2, title: 'CSS', desc: 'Css is for design'},
        {id: 3, title: 'JavaScript', desc: 'JavaScript is for interactive'}
      ]
    }
  }
  render() {
    return (
      <div className="App">
        <Subject 
          title = {this.state.subject.title} 
          sub= {this.state.subject.sub}>
        </Subject>
        <Subject title = "React" sub= "For UI"></Subject>
        <TOC
          data = {this.state.contents}
        ></TOC>
        <Content title="HTML" desc=" 
        HTML is HyperText Markup Language."></Content>
      </div>
    );
}
} 

이런식으로 작성할 수 있다.

물론 지금은 React의 코드양이 훨씬 많지만 점점 써야할 HTML양이 많아질 때 더욱 더 진가를 발휘한다🌟🌟

 

 

Component에 대해서 알아야 하는데 

 

class를 정의할 때 Component가 필요하다.

React에 포함된 많은 정보들을 상속하기 위해서 필요하다고 할 수 있다.

그래서

class App extends Component {

}

이런 형식으로 사용한다

 

그리고 

class App extends Component {
  constructor(props){ //초기화 담당
    super(props);
}

constructor는 초기화를 담당하는데 

 

React에서 생성자(constructor)는 보통 아래의 두 가지 목적을 위하여 사용된다:

• this.state에 객체를 할당하여 지역 state를 초기화
• 인스턴스에 이벤트 처리 메서드를 바인딩

출처: https://ko.reactjs.org/docs/react-component.html#constructor

 

위에 있는 React코드 중

<div className="App">
        <Subject 
          title = {this.state.subject.title} 
          sub= {this.state.subject.sub}>
        </Subject>
        <Subject title = "React" sub= "For UI"></Subject>
        <TOC
          data = {this.state.contents}
        ></TOC>
        <Content title="HTML" desc=" 
        HTML is HyperText Markup Language."></Content>
</div>

이 부분에 있는 this.state가 아래 코드인 

    this.state = {
      subject: {title: 'WEB', sub: 'World Wide Web!' },
      contents: [
        {id: 1, title: 'HTML', desc: 'HTML is for information'},
        {id: 2, title: 'CSS', desc: 'Css is for design'},
        {id: 3, title: 'JavaScript', desc: 'JavaScript is for interactive'}
      ]
    }

에서 가져오기 위해서 constructor를 사용하는 것이다

한마디로 constructor가 초기화작업에 해당한다!!