본문 바로가기
[자기계발]/유튜브로 코딩배우기

[생활코딩] React 강의-1 1~14강 React 소개

슈총총 2021. 4. 6.
반응형

1~6강

5강에서 마지막 지정된 경로에 create react app. 할 때, 마침표 전에 띄어쓰기를 해야한다. (create react app.) -> (create react app .)

 

6강에서 npm run start 안되시는분은 Welcome 페이지에 Open folder... 누르셔서 저번시간에 만든 react-app 폴더를 선택 해주시면 창이 새로 떠요 View-appearance-panel 체크 해주시고 하단의 터미널에서 npm run start 하시면 됩니다.

 

끄고 싶으면 CTRL+C 

다시 키려면 npm run start 

7강

따라하다가 에러날 경우, 함수형식을 클래스형식으로 고치고 첫 줄도 import React, { Component } from 'react'; 로 고쳐야된다고 한다.

 

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';



class App extends Component {

    render () {

      return (

      <div className="App">

        <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>

          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a

          className="App-link"

          href="https://reactjs.org"

          target="_blank"

          rel="noopener noreferrer"

        >

          Learn React

        </a>

      </header>

      </div>

    );

  }

}



export default App;


import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

 

class App extends Component {

    render () {

      return (

      <div className="App">

      hello react!!

      </div>

    );

  }

}

 

export default App;

이렇게 <div> 사이를 수정해주면 화면이 바뀐다. 우리는 어디를 수정해주면 되는 지 알게 되었다. 

8강 - CSS 코딩하는 법

App.css / index.css 파일 내용을 지워서 처음부터 하는 거로 ~

9강 - 배포하는 법

1) 개발할 때는 npm run start --> 이것저것 기능들이 많이 들어있어서

엄청 용량이 크다. 2) 개발하다가 어플리케이션을 완성한 후에는 npm run build --> 용량을 엄청 줄여준다.

 

 build 전 index.html 파일의 크기가 1.7MB인데 1.7KB로 엄청나게 용량을 줄였다.

10강 - REACT가 없다면

<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">JavaScript</a></li>
        </ul>
    </nav>
    
    <article>
        <h2>HTML</h2>
        HTML is HyperText Markup Language
    </article>
</body>
</html>

여기서 만약 밑의 코드가 

    <header>

    <h1>WEB</h1>

    world wide web!

    </header>

 

<Subject></Subject>로 요약된다면? 이것을 하는 것이 REACT이다.

11강.1 - 컴포넌트 만들기 1

App.js 파일에다가 우리가 <Subject></Subject>를 넣어서 컴포넌트 만들어주는 작업을 할 것이다.

import { render } from '@testing-library/react';
import React, { Component } from 'react';
import './App.css';

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

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

export default App;

컴퍼넌트를 만들 떄는 하나의 최상의 태그로 시작해야한다.

여기서는 <header>이다

11강.2 - 컴포넌트 만들기2

import { render } from '@testing-library/react';
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">JavaScript</a></li>
        </ul>
      </nav>
    );
  }
}

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

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

export default App;

 

REACT를 컴포넌트를 바라보는 시각을 정리정돈의 도구로 보라. 컴포넌트의 이름만 집중하게 하여 더욱 복잡한 코드에 도전하는 것을 목표로하면 된다. 이런 기초적인 것들을 잘해야 뒤에 나오는 덜 중요한 것도 활용할 수 있게 된다.

12강 Props

a같은 것이 태그

title, sub, href 같은 속성이 하늘색 

 

{this.props.title} 객체지향형 this를 이용하여 이렇게 만든다.

html 에서의 태그의 성질을 attribute라고 하는데 REACT에서 용어상 충돌방지를 위해 props를 쓴다.

 

이렇게 하면 내용을 하나하나 안 바꾸고 필요할 때만 저렇게 바꾸면 된다. 이것을 '리팩토링'이라고 하며 효율적으로 코드를 짤수 있도록 도와준다. 참고로 desc = descriptiopn

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

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="WEB!" sub="world wide web!"></Subject>
        <TOC></TOC>
        <Content title="HTML!" desc="html is HyperText Markup Language."></Content>
      </div>
    );
  }

13강 React Developer Tools

이고잉의 경우, 공부를 할 때 굉장히 중요하게 생각하는 요소들이 있다. 이것들이 있으면 '독립한거다' 라고 생각 가능하다고 한다.

1. 우리가 알고자 하는 것에 대한 특성을 누군가가 잘 정리 정돈한 그 설명서를 볼 줄 아는 것.

우리는 REACT, JS를 보고 무슨 의미인지 파악이 가능하다. 문제는 장황하고 빈약하다는 점.

 

2. 과학자가 되어 여러가지 가설을 세워놓고 스스로 알아낼 수 있는 능력 - 현재 상태를 우리가 측정하고 분석하는 것 

 

3. 인내심 - 이 모든 것을 참고 배울 인내심 

 

4. 촉매 -궁금한 것을 질문하고 검색하는 것

 

이 4가지가만 있으면 독립이 가능하다

 

현재의 상태를 알아내는 도구 소개: 크롬 확장프로그램 react developer tools

 

REACT 홈페이지에서 COMMUNITY 가 있는데 TOOLS에 여러가지 기능이 있다. 참고하고 또 확장 프로그램을 깔아서 개발자 도구를 이요하면 분석이 가능하다.편집도 가능하다. 문제를 스스로 상태를 확인할 수 있는 상태가 된 것이다.

14강 Component 파일로 분석하기

각각의 component 별도의 파일로 쪼개 보기. 정리정돈 하기

src에 디렉토리를 만들고 각각의 component 별도의 파일로 정리 정돈을 해볼 것이다

import React, { Component } from 'react';
//REACT라는 라이브러리에서 Component 라고하는 클래스를 로딩한다//

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>
      );
    }
  }

  export default TOC;
  //어떤 것을 외부에서 사용할 수 있게 허용할 것인가? export 를 하여 Toc.js를 가져가서 사용하겠다.//

다른 폴더에 이렇게 TOC.js 파일을 만든다. import 할 때, 같은 폴더안의 폴더는 ./로 접근가능

반복해서 3개 다 파일을 만들고

 

APP.js 파일에다

import React, { Component } from 'react';

import TOC from "./components/TOC";

import Content from "./components/Content";

import Subject from "./components/Subject";

import './App.css';

 

이렇게 해주면 똑같이 적용되는 것을 알 수 있다.

반응형
저작자표시 비영리 변경금지

'[자기계발] > 유튜브로 코딩배우기' 카테고리의 다른 글

CS 전공을 해야할까? 개발자가 되기 위해 대학을 나와야할까?  (0) 2021.04.21
[생활코딩]React 강의-2 15~16강 State, props, bind 소개  (0) 2021.04.19
<Nomad Coders> 파이썬 실습 web scrapper  (1) 2021.02.01
<Nomad Coders> 파이썬 1.9~ 1.12  (0) 2021.02.01
<Nomad Coders> 파이썬 이론 1.0~  (0) 2021.01.26

'[자기계발]/유튜브로 코딩배우기' 관련글

티스토리툴바