리엑트 1회차..

2022. 7. 26. 00:15

작심삼일만 몇 번인데.. 이번엔 완주를 하여 react를 습득하겠다는 필사의 의지..

이렇게 기록하며 다시 시작한다.

이번엔 기필코 완주한다.

인프런에서 강의를 끊었다.

다시 달려보아야겠다.. 이번엔 기필코 완주해야 한다.

기본적인 소개 강의는 스킵한다.. 왜냐면 작심삼일로 이미.. 알고 있기 때문이다.

[1] 본격적으로 리액트 코드 작성하기

1. webpack
   => 전체적으로 파일을 관리해주는 도구

2. BABEL
   => 자바스크립트 변환 도구
   여러 가지의 최신 문법을 예전 문법으로

어느 브라우저에서도 잘 작동하게 만드는 것 정도..

3. https://codesandbox.io/s/4r6lqrlvj9

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>안녕하세요 리액트</h1>
      </div>
    );
  }
}

export default App;

기본적인 문법을 적어놓았다..

[2] JSX 문법 기본 문법 알아보기(1)

1. 꼭 닫혀야 하는 태그
태그는 꼭 닫혀있어야 합니다. <div> 태그를 열었으면, </div>
input도 마찬가지입니다. 모든 태그는 닫혀야 합니다.

2. 감싸져 있는 엘리먼트

두 개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸 져있어야 합니다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        Hello
      </div>
      <div>
        Bye
      </div>
    );
  }
}

export default App;

이런 식으로 작성하면 에러가 발생한다.

3. JSX 안에 자바스크립트 값 사용하기

1) 선언 예제 1

class App extends Component {
  render() {
    const name = 'react';
    return (
      <div>
        hello {name}!
      </div>
    );
  }
}

export default App;

2) 선언 예제 2

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 && (<div>맞아요!</div>)
        }
      </div>
    );
  }
}

export default App;

3) 선언 예제 3

import React, { Component } from 'react';

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>하나</div>);
            if (value === 2) return (<div>둘</div>);
            if (value === 3) return (<div>셋</div>);
          })()
        }
      </div>
    );
  }
}

export default App;

4. var vs const vs let

var는 es6 더 이상 사용 안되고

const는 한번 선언 후 고정값때 사용

let은 선언후 바뀔 수 있는 값에 사용

5. JSX 안에 style 값 사용하기
class=> className 으로 사용.

6. 주석 넣기.

오늘 공부한 부분은 여기까지다..

아직 133분가량 남았다.

순식간에 진행하고 React로 NodeBird SNS 만들기를 들어가야겠다.

대략 44분을 공부하였다...

리엑트를 공부하시는 분들 모두 파이팅이다.

퍼블리셔 이과장