🏃12/10 내배캠 React(26일~30일) 6주차 WIL

이번 주 배운 것

 

Javascript 심화

 

[ copyObject( ) ]

: for문을 돌리면서 변수값을 하나하나씩 복사하는 방법 → 똑같은 주소값을 가져오는 것이 아닌, 복사를 하여 완전히 새로운 데이터 주소값을 가져온다(대신 1depth(얕은복사)를 사용한다.)

 

[ 얕은 복사 / 깊은 복사 ]

- 얕은 복사 : 바로 아래 단계의 값(1 depth)만 복사 -> 문제점 : 중첩된 객체의 경우 참조형 데이터가 저장된 속성property를 복사할 때, 주소값만 복사한다.

- 깊은 복사 : 내부의 모든 값들을 하나하나 다 찾아서 모두 복사한다 

모듈(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(”임재영”)

 

너무나도 강조하고 중요했던 props와 state... 어느정도 이해하고 어떤 형태로 구현되는지 드디어 이해했다

이거라도 챙겨가는 일주일이 되었으면 한다.

todo-list는 원장튜터님의 강의를 참고하면서 보완해 나가려고 한다