ISFP의 느리게 굴러가는 개발 블로그

[생활코딩] React 스터디 #2 컴포넌트 만들기 본문

웹 스터디/react

[생활코딩] React 스터디 #2 컴포넌트 만들기

taeeeeun 2020. 11. 22. 18:55

오늘은 드디어 미루고 미루던 블로그 포스팅을 하는 날

코드를 예쁘게 복사할 수 있는 Color Scripter라는 프로그램을 알게 되었다.

근데 VSCode의 테마가 예뻐서 그대로 복사해오고 싶은데 방법을 모르겠다

 

 

1. react를 사용하지 않고 html로 작성했을 때

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
    <body>
        <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">Java Script</a></li>
            </ul> 
        </nav>
        <article>
            <h2>HTML</h2>
            HTML is Hyper Text Markup Language.
        </article>
        
    </body>
</html>
 cs

순수한 html로 코드를 짜면 이렇게 나온다. 지금은 엄청 간단한 수준이지 만약 소스코드가 길어진다면 더 복잡해질 것이다. 

 

2. 컴퍼넌트 만들기

 

<기본 구조>

class 클래스이름 extends Component{
    render(){
        return();
    }
}

*컴퍼넌트 이름은 항상 대문자여야 하고 하나의 최상위 태그로 시작되어야 한다.

return의 괄호 안에 실제 들어갈 내용을 삽입하면 된다.

 

이런 방식으로 위 코드의 header, nav, article 아래에 있던 코드를 각각의 component를 만들 수 있고, 코드를 아래와 같이 짤 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import React, {Component} from 'react';
import './App.css';
 
class Subject extends Component {
  render(){
  return (
    <header>  {/*최상위태그*/}
    <h1>WEB</h1>
    world wide web!
    </header>
  );
  }
}
 
class TOC extends Component {
  render(){
  return (
    <nav>
      <ul>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">Java Script</a></li>
      </ul> 
    </nav>
  );
  }
}
class Content extends Component{
  render(){
    return(
      <article>
        <h2>HTML</h2>
        HTML is Hyper Text Markup Language.
      </article>
    );
  }
}
 
class App extends Component {
  render(){
  return (
    <div className="App">
      <Subject></Subject>
      <TOC></TOC>
      <Content></Content>
    </div>
  );
  }
}
 
export default App;
 
 cs

 

npm run start를 하면 다음과 같은 화면을 확인할 수 있다. html로 작성했을 때와 똑같은 화면이지만 component를 사용함으로써 더 깔끔한 코드를 작성할 수 있다.

 

사실 웹은 react가 뭔지 몰라서 html코드를 넘겨줘야하기 때문에 App Component를 사용한다고 한다.

 

3. Props

하지만 만약에 리액트도 계속해서 똑같은 컴퍼넌트를 만들어야한다면 코드가 길어졌을 때 감당할 수 없을 것이다. 하지만 동일한 태그를 써서 코드를 재사용할 수 있다면?!을 가능하게 하는 것이 props라는 기능이다.

 

{this.props.속성값}

위에 작성했던 Subject Component의 내용을 아래와 같이 props를 사용해서 바꾸고

1
2
3
4
5
6
7
8
9
10
class Subject extends Component {
  render(){
  return (
    <header>  {/*최상위태그*/}
    <h1>{this.props.title}</h1>
    {this.props.sub}
    </header>
  );
  }
}
 cs

 

App Component에서 Subject Component 안에 title과 sub 값을 입력해준다면 굳이 새로운 Component를 만들지 않아도 Subject Component와 똑같은 양식에 다른 내용을 적을 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
class App extends Component {
  render(){
  return (
    <div className="App">
      <Subject title="WEB" sub="World Wide Web!"></Subject>
      <Subject title="React" sub="for UI"></Subject>
      <TOC></TOC>
      <Content></Content>
    </div>
  );
  }
}
 cs

 

이렇게 React, for UI라는 내용이 위의 WEB과 동일하게 적용되는 것을 확인할 수 있다.

 

4. Component 파일 분리하기

1) 새로운 이름의 js 파일을 생성한다.

2) 새로운 js 파일에 코드를 작성하고 밑에 export문을 작성한다.

3) App.js 코드의 시작에 만든 js 파일을 import 한다.

코드를 간결하게 정리할 수 있고, 앱을 개발할 때 코드 수정이 용이해진다.

'웹 스터디 > react' 카테고리의 다른 글

[React] Redux(리덕스) 개념잡기  (2) 2021.01.16
[생활코딩] 리액트 스터디 #5 이벤트(2)  (0) 2020.11.24
[생활코딩] React 스터디 #4 이벤트  (0) 2020.11.23
[생활코딩] React 스터디 #3 State  (3) 2020.11.23
[생활코딩] React 스터디 #1 샘플 웹앱 실행  (1) 2020.11.15
'웹 스터디/react' Related Articles more
Comments