[SSAC 3기] - 10주차-(3)

SangHoon·2021년 10월 8일

SSAC ssac3기 싹3기

SSAC 3기과정

목록 보기

19/22

🏫라이브러리와 프레임워크 차이

프레임워크는 꼭 써야되는것과 지켜야 되는 룰이 있는 반면, 라이브러리는 쓰든 안쓰든 개발자 마음!

1. 라이브러리
자주 쓰는 기능들(화면을 만들기 위한)을 모아 놓은 것

2. 프레임 워크
소프트웨어 개발 시 복잡한 문제를 해결하거나 서술하는 데 사용하는 기본 개념 구조

🔯REACT

REACT : 사용자 인터페이스를 만들기 위한 javascript 라이브러리

1.정의

유저 인터페이스를 만드는데 사용되는 오픈 소스 자바스크립트 라이브러리
페이스북에서 개발
프론트 3대장(React, Vue, Angular) 중 하나로써 가장 많은 점유율을 기록하고 있다.
주로 mvc, mvvm 아키텍처를 사용

2. 특징

SPA(Single Page Application), CSR(Client Side Rendering)
컴포넌트 기반의 화면 구성
가상 DOM으로 빠른 속도
선언형과 간결성

3. 작동원리

가상돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트 된다.

🔯REACT 환경설정(설치)

ssac 교육생들은 이 전에 해야하는 환경은 갖추어져 있기때문에 vsc 터미널에서 바로 진행

1. node.js 설치

https://nodejs.org/ko/ 에서 LTE버전으로 다운
$ node -v : 버전 확인

2. react 프로젝트 앱 설치

$ create-react-app [프로젝트이름]
-> webpack, Babel을 따로 설치를 안해도 됨

3. yarn 설치

$ npm install -g yarn
-> 2번에서 npm이 포함되어 설치됨으로 npm으로 으로 해도 되나, yarn이 좀 더 가볍기 떄문에 yarn으로 많이 사용함

4. 실행

$ cd[프로젝트 앱 이름]
$ yarn start
-> react svg로고가 뜬 웹페이지를 볼 수 있다.

🦇JSX(JavaScript XML)

JSX는 그럼 자바스크립트인가요?
-> ㄴㄴ 리액트에서만 쓰이기 때문에 공식적인 자바스크립트 문법은 아니다.

1. 정의

자바스크립트 문법을 확장하여 UI 가 어떻게 보일지 정의하는 문법

2. 특징

xml과 문법이 비슷하여 읽기 쉽다.
문법오류와 코드량 감소
팀의 생산성 향상

3. 작동원리

컴포넌트 파일에서 XML 형태로 코드를 작성하면 Babel이 JSX문법을 Javascript로 변환해준다.

4. 규칙(주의사항)
1) 태그는 닫혀 있어야 한다.

br, hr, input 등 빈태그(종료태그 없는 태그)도 닫아줘야 한다.
<br></br> <hr></hr>

2) 리턴안에 부모태그가 꼭 있어야한다.

    import React from 'react';

    function App(){
      return(
          <div>
              <h1>ssac 3기</h2>
              <h2>react 수업</h2>
          </div>
          )
    }
    export default App;

3) jsx 내부에서 js 표현식을 사용시 중괄호로 감싸서 사용

  import React from 'react';

  function App(){
    const name = ssac;
    return(
        <div>
              <h2>hello! { name }</h2>
        <div>
      )
  }
  export default App;

4) 조건부 연산자

자바스크립트 if문을 사용하려면 jsx 밖에서 if문을 사용하거나 {} 안에 조건부 연산자를 사용한다.

5) 조건부 연산자 : 삼항연산자, &&연산자

삼항 연산자

  import React from 'react';

  function App(){
      const name = "ssac";
      return(
        <div>
            { name === "ssac" ? <h2>ssac 입니다.</h2> : <h2>ssac이 아닙니다</h2> }
        </div>
      )
  }
  export default App;

&&연산자

  import React from 'react';

  function App(){
      const name = "ssac";
      return(
          name && <div>ssac 입니다</div>
      )
  }
  export default App;

6) 주석

/* */을 사용한다.
-> 정말 귀찮으므로 단축키를 이용하자!

7) inline style CSS 는 객체형태로 작성

  import React from 'react';

  function App(){
      const name = "ssac";
      const style = {
        backgroundColor: "red",
        fontSize: "2vw",
        padding: 10
      }

      return(
        <div>
            <div style={style}>{name}</div>
        </div>
            )
  }
  export default App;

-> inline, app.css 에 css 작성

🎇Component

리액트의 🌺

데이터가 주어졌을때 이에 맞추어 UI를 만들어주고, 변화가 일어날때 주어진 작업들을 처리한다
종류
- 클래스형 컴포넌트
-> 클래스형 컴포넌트는 state , 라이프사이클 기능 사용가능
-> 클래스형 컴포넌트에서는 render 함수가 있어야하고, jsx를 반환

    import React, {Component} from 'react';

    class App extends Component {
      render() {
        const name = '이상훈';
        return <div>{name}</div>
      }
    }

    export default App;

함수형 컴포넌트
-> 함수형 컴포넌트는 클래스보다 선언하기 편하고, 메모리도 덜사용
-> 함수형 컴포넌트는 state와 라이프사이클 사용x -> hook을 쓰면서 사용 가능하게 됨

    import React from 'react';

    function App() {
      const name = '이상훈';
      return <div>{name}</div>
    }

    export default App;

✨props

property의 약자로, 부모에게 받아온 데이터

리액트의 Data Flow는 단방향 형식으로 부모에서부터 자식으로 이동하기 때문에 거꾸로 올라갈 수 없다.
-> 따라서 props에 있는 데이터들은 수정이 불가능하며 오직 안에있는 값을 꺼내서 사용할수만 있습니다.

 import React, { Component } from 'react';

 const Test = props => {

    const { hello, children } = this.props  
    return(
        <div>
            <h1>안녕, 난 { hello } 이야 !</h1>
            <br></br>
            <h2>children의 값은 { children } 이야!@</h2>
        </div>
    )
 }
 export default App;

   import React, { Component } from 'react';
   const Test = ({ hi, children })=> {

      const { hello, children } = props  
      return(
          <div>
              <h1>안녕, 난 { hello } 이야 !</h1>
              <br></br>
              <h2>children의 값은 { children } 이야!@</h2>
          </div>
      )
  }
  export default App;

🎆state와 useState

리액트의 🌺
react에서 유동적인 데이터를 사용할 때 state 사용 (별도의 상태가 필요할때)

내일 과제 풀면서 다시 수정,보완 할 예정

1. state

컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고있는 객체
함수내에 선언된 변수처럼 컴포넌트 안에서 관리된다.
쉽게 작성하는 법
state = { enter: 0 };

2. setState

class형식에서 사용
state를 바꾸려면 this.setState를 써서 상태값을 바꿔야한다.
-> state가 변경될 때마다 변경된 부분을 감지하여 re-rendering 하는데 setState메소드를 사용하지 않고 직접 state 값을 수정할 경우 변경을 감지하지 못해서 리렌더링을 하지 못하기 때문

3. useState