#10 React - 10. 리액트가 없다면

 

* 웹화면 구성시 복잡도를 관리하기 위한 react의 기능 확인

 - 셈플 웹페이지 작성 (복잡도를 높히기 위해 시멘틱 테그 적용)

<html>
    <body>
        <h1>WEB</h1>
        Word Wide Web!
        <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>
        <h2>HTML</h2>
        HTML is HyperText Markup Loanguage.
    </body>
</html>
 <html>
    <body>
        <header>
            <h1>WEB</h1>
            Word 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 Loanguage.
        </article>
    </body>
</html>

 

#11.1 React - 11.1. 컴포넌트 만들기 1

 

* 준비 - 기본 컴포넌트 구성

// import logo from './logo.svg'; // 삭제
import './App.css';
import { Component } from 'react';

class App extends Component {
  render(){
  return (
    <div className="App">
    hello, jkoogi
    </div>
  );
  }
}

export default App;		 - 불필요한 선언구문 삭제 (삭제하지 않으면 compile 경고)
- 스타일 정의파일 추가
- react의 component 추가

- react의 Component 클래스를 상속받은 App 클래스 정의
- Component 클래스의 render() 메서드 정의
- render() 메서드에서 반환할 text 정의(html 코드)
- return 되는 html 코드는 하나의 테그로 래핑되어야 함
- 표시될 내용
- 래핑 테그 종료




- 반환할 응답 클래스

* 추가 컴포넌트 구성 : 클래스명 첫글자는 대문자

class Subject extends Component{
  render(){
    return(
      <header>
        <h1>WEB</h1>
        Word Wide Web!
      </header>
    );
  }
}

class App extends Component {
  render(){
  return (
    <div className="App">
    <Subject></Subject>
    </div>
  );
  }
}		 - react의 Component 클래스를 상속받은 추가 클래스 정의

- render() 메서드에서 반환할 내용 : header html 코드
> 응답하는 html 코드는
escape 문자를 이용하여 문자열로 구성하는
번거로움이 없도록
jsx(페이스북에서 제공)라는 언어로 코드를 작성하고,
create-react-app에서 javascript로 변환해준다.

(구현한 함수는 javascript가 아님
- 디버그에서 console에 적용해보면 문법오류 발생)



- create-react-app 서비스의 index에 표시될 내용으로 적용



- 저장하면 바로 적용됨.

#11.2 React - 11.2. 컴포넌트 만들기 2

 

* 나머지 컴포넌트 전환

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">JavaScript</a></li>
        </ul>
    </nav>
    );
  }
}

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

class App extends Component {
  render(){
  return (
    <div className="App">
    <Subject></Subject>
    <Toc></Toc>
    <Article></Article>
    </div>
  );
  }
}		 - Toc 클래스 등록













- Article 컴포넌트 클래스 등록















- Toc 컴포넌트 적용
- Article 컴포넌트 적용

 

#12 React - 12. props

 

- 복잡도를 해결하기 위해 컴포넌트를 이용하여 단순화 시켰으나, 비슷한 다른기능을 적용하기 위해 속성을 적용하여 활용성을 확장한다.

 

* porps

 - https://reactjs.org/docs/components-and-props.html#function-and-class-components

 

class Subject extends Component{
  render(){
    return(
      <header>
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </header>
    );
  }
}

class App extends Component {
  render(){
  return (
    <div className="App">
    <Subject title="WEB1" sub="WWW!!"></Subject>
    <Subject title="WEB2" sub="React JSX."></Subject>
    <Toc></Toc>
    <Article></Article>
    </div>
  );
  }
}



- 컴포넌트의 속성 적용
- 컴포넌트의 속성 적용
> title의 값과 sub의 값이 Subject 컴포넌트의 
  입력값으로 적용되어 출력값을 다르게 표시함







- 컴포넌트의 속성 사용
- 컴포넌트의 속성 사용

 

'front > react' 카테고리의 다른 글

생활코딩 react (15-State 소개 및 사용)  (0) 2021.06.29
생활코딩 react (13~14-React Developer Tools, Component 파일로 분리)  (0) 2021.06.22
생활코딩 react (7~9-js, css 코딩 및 배포)  (0) 2021.06.20
생활코딩 react (4~6-create react app 설치, 개발환경 구축, 셈플실행)  (0) 2021.06.20
생활코딩 react (1~3-수업소개, 전략, 개발환경 종류)  (0) 2021.06.19

+ Recent posts

티스토리툴바