새싹 프론트엔드 실무 과정 6주차 React

• 6주차 목요일

1. React란

 

 

프레임워크 vs 라이브러리

- 프레임워크

일정한 형태와 기능을 갖추고 있는 골격 또는 뼈대를 의미

(밀키트)

 

- 라이브러리

특정 기능을 구현하기 위해 미리 만들어진 코드 또는 함수의 집합

(마트)

 

주도권이 누구에게 있느냐의 차이

 

React 특징

1. 컴포넌트 기반 : 코드를 기능별로 나눠서 작성, 코드 재사용성 및 유지보수가 편리

2. Virtual DOM 사용

3. JSX 문법 사용 : 자바스크립트안에서 HTML문법을 사용

 

앞으로 만들 파일들은 다 src안에 만들어야 함!

에러가 있을 시, cd '가고싶은 자식 폴더 이름'

나의 경우 cd react-app 

Ctrl + C눌러서 끄기

pwd 현재위치

ls 안에 뭐가 있는지 알려주는 명령어

clear 누르면 터미널 깔끔해짐!

 

cd 체인지 디렉토리 

cd 자식 폴더 이름

cd.. 하면 부모 디렉토리로 이동

cd ~ 홈 디렉토리

 

 

 

2. JSX

 

 

JSX(JavaScript XML)

- 자바스크립트에 XML을 추가한 확장형 문법

  <React.StrictMode>

 

위 아래 지우기! 요게 있으면 console에 두 번씩 찍힘

 

return 아래에 내가 원하는 코드를 넣을 예정!

App.js가 메인 페이지라고 생각하기!

 

JSC를 사용하는 이유 : 가독성 향상, 팀의 생산성 향상

 

JSX 문법 작성 규칙

- 반드시 하나의 부모 태그로 감싸는 형태여야 함

- 부모 태그가 아무런 역할을 하지 않을 땐, <> </> 으로 사용 가능

    <>

      <div>실행</div>

    </>

- 자바스크립트 표현식은 {} 괄호로 감싸는 형태여야 함

 

function App() {

  const name = 'gan' // 여기에서 만들어주기

  return (

    <div>

      <div>안녕하세요</div>

      <div>{name}</div>

      {/* {}로 감싸서 표현 */}

    </div>

  );

}

 

- return 함수 내 if, for와 같은 구문은 사용할 수 ❌

➡ 삼항 연산자

 

function App() {

  const name = "gan";

  return (

    <div>

      { name === 'gan'? (<h1>학생</h1>) : (<h1>선생님</h1>)}

    </div>

  );

}

 

➡ AND(&&)연산자로 대체

function App() {

  const name = "gan";

  return (

    <div>

      { name === 'gan' && <h1>학생</h1> }

    </div>

  );

}

- HTML 태그는 반드시 닫아야 함

- class 대신 className을 사용

- CSS style

 

function App() {

  const name = "gan";

  const style = {

    backgroundColor: "red",

    fontSize: "12px",

  };

  return (

    <div style={style}>

      <div>안녕하세요.</div>

      <div>{name}</div>

    </div>

  );

}

- 주석 {/* ... */}

function App() {

  const name = "gan";

  return (

    <div>

      {/* 주석은 이렇게 */}

      <div>안녕하세요.</div>

      <div>{name}</div>

    </div>

  );

}

 

 

3. 컴포넌트

 

src/TodaysPlan.js

➡  rsc 엔터하면 자동 완성

import React from 'react';

const TodaysPlan = () => {

  return (

    <div className='message-container'>

      놀러가자

    </div>

  );

};

export default TodaysPlan;

 

 

src/App.js

import TodaysPlan from "./TodaysPlan";

function App() {

  return (

    <>

     <TodaysPlan/>

    </>

  );

}

export default App;

 

프로퍼티란?

- 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터. 단방향 데이터 흐름

- 프로퍼티 값은 수정이 불가능 함

- properties를 줄여서 props라고도 함

 

프로퍼티 값 자료형

- 문자열 " "

- 문자열 이외의 값 { }

 

만들기 위해,

띄어쓰기 하고 넣어주기

비구조화 할당(= 구조 분해) 문법 사용

 

✅ var, let 차이

var 사용

function App() {

  var a = "hello";

  if(true){

  var a = "bye";

  }

  return(

  <div>

  <h1>{a}</h1>

  </div>

  );

  }

  export default App;

 

 

let 사용

function App() {

  let a = "hello";

  if (true) {

    let a = "bye";

  }

  return (

    <div>

      <h1>{a}</h1>

    </div>

  );

}

export default App;

 

var는 scope가 함수 단위,

let은 scope가 블록 단위

 

• 6주차 금요일

4. 프로퍼티

5. 배열 컴포넌트

6. state

 

map() 함수

- 배열 안의 모든 요소들의 값을 변경해서 새로운 배열을 생성하는 함수

- 다양한 자료형을 저장 가능

- XML과 JSX 또한 저장 가능

- 두 번째 매개변수 index

 

key props

- 각각의 아이템들은 다 유일해야 함

- key= { . }으로 되도록이면 유일한 값 보내기 ➡ 성능 향상

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 6주차 블로그 포스팅