[2023 신입부원 심화 스터디] 정호용 #5주차 react - section 0 ~ 2

📌section 0
사용자 정의 태그 -> React에서는 Component라고 함. 
1. 가독성이 좋다.
2. 재사용성이 높다. -> 한 번 정의해 두면 다른 곳에서 재사용할 수 있다.
3. 유지보수가 좋다. -> 실시간으로 변경된 내용이 업데이트 된다.

📌section 2

🎮1. 리액트가 없다면?
public 디렉토리 -> npm run start 했을 때 파일을 찾는 디렉토리
semantic code <header></header> 나 <nav></nav>와 같이 기능은 없지만 의미를 파악하기 쉽게 구분한 코드
만약 html 코드가 1000만줄, 1억줄이라면 코드가 한눈에 안 들어온다. -> 혼란스러움
코드를 안보이게 감춰두고 심플하게 표현하고 싶다! -> 그걸 가능하게 해주는 것이 리액트

 

🎮2. 컴포넌트 만들기 1

import React, {Component} from 'react';
import './App.css';
class App extends Component{
render(){
    return (
        <div className='App'>
            Hello, React!!
        </div>
    )
  }
}

위 코드를 Subject라는 태그로 바꾸기

 

class Subject extends Compoent{
    render(){ -> javascript의 최신버전에서는 function 생략
        return (
          <h1>WEB</h1> -> 주의점 : 하나의 최상위 태그만 써야 함
          world wide web!
        );
    }
}

결과 :

import React, {Component} from 'react';
import './App.css';
class App extends Component{
render(){
    return (
        <div className='App'>
            <Subject></Subject> -> 방금 위 코드를 subject로 바꿔준 것임
        </div>
    )
}

위 코드들은 자바스크립트 코드가 아님! 실제로 쓰면 문법오류 남
자바스크립트와 거의 유사하나 번거로운 작업을 피하기 위해 
jsx라는 것을 만든것임.


🎮3. 컴포넌트 만들기2

 

class TOC extends Component{
    render(){
        return (
            <nav>
                <li><a href="1.html">HTML</a></li>
                <li><a href="2.html">CSS</a></li>
                <li><a href="3.html">Javascript</a></li>
            </nav>
        );
    }
}

class App extends Component{
    render(){
        return (
            <div className='App'>
                <Subject></Subject> 
                <TOC></TOC>
                <Content></Content>
            </div>
        )
    }
}

class Content extends Component{
    render(){
        return(
            <article>
                <h2>HTML</h2>
                HTML is HyperText Markup Language.
            </article>
        );
    }
}

리액트를 바라보는 첫 번째 시선 -> 정리정돈 해 주는 도구
정리정돈 후 이름표를 붙이면 이름만 기억하면 됨
리액트도 동일함
코드 정리 후 컴포넌트 이름만 붙이면 그것만 기억하면 됨


🎮4. props

이걸 그대로 인터넷에 올리면 사람들은 이 코드를 다른 곳에 붙여서 사용 가능하다.App
그런데 항상 똑같은 결과물을 내놓는다! -> 무언가 아쉽다
ex) <a href=""></a>은 attribute(속성) 을 통해 각각의 주소를 표현함
근데 항상 똑같은 주소로만 연결된다!

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 title="HTML" desc ="HTML is HyperText Markup Language."></Content>
            </div>
        )
    }
}

title을 javascript는 attribute라고 하지만, react에서는 props라고 함

class Subject extends Compoent{
    render(){ 
        return (
          <h1>{this.props.title}</h1> 
          {this.props.sub}
        );
    }
}
class Content extends Component{
    render(){
        return(
            <article>
                <h2>{this.props.title}</h2>
                {this.props.desc}
            </article>
        );
    }
}

위 코드는 앞전 코드와 결과는 동일하지만 코드는 효율적이고, 깔끔해졌다 -> 코드 리팩토링이라고 함.App
title과 sub이 subject라는 컴포넌트의 입력값이 되어서 그에 따라 출력값이 바뀌게 함
완벽하게 동작하는 사용자 정의 태그 완성~!

 

🎮5. React Developer Tools

react 홈페이지 -> community -> tools -> debugging
현재 리액트로 만들어진 앱들의 상태를 확인 가능 
react developer tools 설치
원하는 페이지 -> 개발자 도구 -> elements 클릭
<Subject title="WEB"></Subject>의 영역은 <h1>WEB</h1> 이 부분이었다.
react 탭 클릭
react로 만든 컴포넌트를 보여주는 기능

태그 분석 -> elements탭
컴포넌트 분석 -> react탭
react 탭에서 값을 실시간으로도 변경할 수 있다.


🎮6. Component 파일로 분리하기

한 파일 안에 컴포넌트가 1000개라고 생각해보자.
너무 많기도 하고 다른 파일에서 불러쓸 수도 없다.
컴포넌트를 파일별로 나눠보자.



** App.js **

class Content extends Component{
    render(){
        return(
            <article>
                <h2>HTML</h2>
                HTML is HyperText Markup Language.
            </article>
        );
    }
}

** TOC.js **

import React, {Component} from 'react'; -> 이걸 씀으로써 component를 불러온다.
class TOC extends Component{
    render(){
        return (
            <nav>
                <li><a href="1.html">HTML</a></li>
                <li><a href="2.html">CSS</a></li>
                <li><a href="3.html">Javascript</a></li>
            </nav>
        );
    }
}

export default TOC;
TOC라는 클래스를 외부에서 갖다쓸수 있게 해줌

import TOC from "./components/TOC";
외부에서 TOC를 갖다 쓸 수 있게 됨

** Content.js **

import React, {Component} from 'react';
class Content extends Component{
    render(){
        return(
            <article>
                <h2>{this.props.title}</h2>
                {this.props.desc}
            </article>
        );
    }
}

export default Content;


다른 파일에서 사용 시 :
import Content from "./components/Content";

필요한 컴포넌트를 빠르게 찾을 수 있다.

 

🎮개인적인 궁금증
처음 클래스 선언 시 왜 render()를 쓰는 걸까?

-> render()를 사용하면 그 결과는 실제 dom을 의미하지 않고 그 형태를 본딴 자바스크립트 객체를 반환한다.

-> 참고 사이트
https://seungddak.tistory.com/166

[react] render 함수 와 가상돔에 대하여

 

-> 스터디 후 정명님의 답변 

 

리액트 -> 가상 dom활용
div 안의 내용들은 dom의 형태를 띄고 있는 자바스크립트 형태를 반환한다
html의 정적인 것들을 js react를 이용해서 동적인 페이지를 만들 수 있다
상황별로 렌더링이 가능해진다 
ex) 로그인 창에서 아이디 입력 안했을 때 아이디 입력하라고 나오는 화면도 react를 이용한 것임.