😇12/07 내배캠 React 28일차

🐜 오늘 할 일

• 리액트 입문 강의
• 리액트 과제하기
• 리액트 강의 세션3개듣기 
• 자바스크립트 복습 (원장님 3~5강) 
• 알고리즘 문제풀이

---

📆 계획표

시간	내용	결과
8:00 ~ 9:00	알고리즘 문제풀이	⛈
9:00 ~ 13:00	리액트 입문강의 복습
14:00 ~ 18:00	리액트 강의
18:00 ~ 19:00	리액트 과제하기
19:00 ~ 22:00	자바스크립트 복습

---

👩🏼‍🌾 오늘의 줍줍 " " 🌾🌾

what is React?

자바스크립트 라이브러리

자유롭고, 빠른 화면전환 등 웹페이지를 조금 더 반응이 좋고 쫀득쫀득하게 만들어 주기 위해 사용한다.

왜 리엑트가 필요한가? : 최신의 다양하고 깔끔한 인터페이스를 쉽게 구축하게 하기 위해서 사용한다.

고수준의 구문을 제공해서 선언형 방식, 선언형 컴포넌트 중심의 방식으로 코드를 작성한다.

리액트는 컴포넌트에 집중하는 javascript프레임워크이다

리액트로 작업할 땐

: 싱글페이지 작업으로 진행한다 → html페이지의 요소들을 제어하기 위해서

예를들어 링크를 연결하고, 페이지를 전환하고, 새로운 html을 다시 요청하지 않고, 보여지는 화면만을 변경하고 싶다면 react.js를 사용한다.

Javascript기초 및 ES6에 관한 것

차세대 기능을 사용한다

let & const

var이 있지만 let, const를 사용할 것을 추천한다.

let 수정할 수 있는 변수를 선언

const 한번 지정하면 절대 변하지 않는 값인 상수를 선언

react에서는 거의 const를 사용할 것이다

화살표 함수 Arrow Functions

장점

• function을 생략하여 코드가 짧다
• javascript의 this가 가져오는 에러를 해결해준다

형태

기본 함수

function myFnc(){
	...
}

화살표 함수

const myFnc = () => {
	...
}

인수가 1개일 경우에는 인수의 ()창을 지울 수 있다.

const myFnc = 인수 ⇒ { }

= 인수가 1개 이상일 때는 무조건 ()창을 넣어줘야한다.

const myFnc = (인수,인수) ⇒ { }

화살표함수는 여러가지를 생략할 수 있다

const multiply = (number) => {
  return number * 2;
}

console.log(multiply(2)); // 4 출력

number라는 인수가 1개이고, return을 생략할 수 있다

const multiply = number => number * 2;

console.log(multiply(2)); // 4 출력

모듈(Modules) Exports & Imports

파일의 크기가 커질수록 하나의 파일에서 코드를 작성하기에 한계가 존재한다.

modules이라는 기능을 통해 하나의 파일을 여러개의 파일로 나눌 수 있다.

export

변수, 함수, 클래스 앞에 export 키워드를 붙여서 모듈의 기능을 외부에서 사용할 수 있도록 내보낸다.

import

export로 내보낸 모듈을 가져오는 기능을 담당한다.

default export

default로 선언된 모듈은 하나의 파일에서 단 하나의 변수 또는 클래스 등등만 export 할 수 있다.

import할 때는 아무 이름으로 import 가능하다.

import **person from './person.js'**
//두개는 같은 값이 나온다. import하는 이름값이 중요하진 않다
****import **prs from './person.js'**

named export

한 파일 내에서 여러 변수/클래스 등등을 export 하는 것이 가능하다.

단, import 할 때는 {} 안에다가 export 된 이름과 동일하게 설정해야 한다.

다른 이름으로 import 할 수 있으나 아래처럼 **as**를 사용해야 한다.

* as 를 사용하면 한 파일에 있는 클래스/변수들을 한 번에 import 할 수 있다.

import {smth} from'./utility.js'
import {smth as Smith} from'./utility.js'
import * as bundled from'./utility.js'

 

Props 란?

부모 컴포넌트로부터 받아온 데이터

즉, 컴포넌트 간의 정보를 서로 교류하는 방법 중 부모 → 자식에게 데이터를 주는 방식이다.

전달하는 법

부모 컴포넌트에 있는 변수값을 return값 자식 컴포넌트에 넣어준다

ex) return <Child **motherName={name}** />;

전달받는 법

자식 컴포넌트값에 props값을 넣는다

ex) function Child**(props)**{ }

PropTypes 란?

props에 type을 검사할 수 있는 기능

props에 확실한 타입이 정해져 있지 않으면 문자열,숫자값을 읽지 못해 에러를 일으키곤 한다.

그래서 props에 type을 검사할 수 있는 proptypes를 이용한다

참고 : https://ko.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper

DefaultProps 란?

부모 컴포넌트에게 데이터를 전달받기 전에 props값을 할당해 놓는 것, 부모 컴포넌트에게 데이터를 전달 받으면 그 데이터로 대체된다

형태 :

1. 자식컴포넌트 함수명에 .defaultProps추가하기

ex) Child**.defaultProps={ name: ‘기본 이름’ }**

1. 구조분해할당을 이용해 객체에 직접 접근할 경우

ex) function Child(**{name = “기본 이름”}**){}

**export default Child;**

State 란?

즉, 상태이다. 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다

형태 : useState()를 사용한다.

기본형태 : const [value, setValue] = useState (초기값) // value = state이름

ex) const [name, setName] = useState(”임재영”)

 

오늘은..

오늘은 React입문과 다른 강의를 들었다.

아직까진 이해가 되긴하지만 todo-list를 다시 만들어 보면서 부족한 부분을 채워나가보자