웹 튜터링 3차 과제

<새로 알게 된 점>

 

처음부터 styled component로 묶으면 개발할 때 편하니까 스타일링이 적용되지 않는 것도 묶자.

GlobalStyle에 있는 font-size는 왠만하면 건들지 않는 것이 좋다.

---> px을 rem으로 바꿀 때 계산하기 편리하기 위해서 ex) GlobalStyle에 font-size가 10px로 되어있으면 rem으로 변환할 때 10만 나눠주면 된다. ( 200px = 20rem )

 

 

이번 과제에서는 배열에 변경을 가할 일이 없기 때문에 key값으로 index를 부여해도 문제가 없으나 보통의 경우는 지양해야 합니다.

자바스크립트의 배열은 정적이지 않습니다. 즉, 배열의 길이나 원소 등이 변할 수 있다는 의미입니다. 따라서 배열의 index를 key prop으로 사용하는 것을 지양해야 합니다.

배열의 원소의 순서가 바뀌면 index도 바뀌고 컴포넌트마다 고유해야 하는 key값도 같이 바뀌기 때문입니다. 이렇게 되면 리액트는 리렌더링 해야하는 컴포넌트를 헷갈려 잘못된 컴포넌트를 리렌더링할 수 있습니다.

key가 전역적으로 고유할 필요는 없고 형제 요소에서 고유해야 합니다. (같이 매핑되는 컴포넌트끼리만 고유한 키를 나눠가지면 됩니다)

 

---> 배열을 삭제하면 인덱스가 뒤로 밀리니까 고유한 key값을 줘야 한다.

 

 

src = source

모든 파일은 src에 넣는다.

 

리액트를 사용해 만든 사용자 정의 태그 = component

반드시 render()가 있어야 한다.

컴포넌트에는 항상 하나의 최상위 태그만 써야 한다. 또한 function 함수 이름() 이 아니라 함수 이름()만 쓴다.

 

같은 코드지만 훨씬 효율적으로 바꾸는 것 = refactoring 했다.

html 의 속성 = attribute

react 의 속성 = props

 

 

컴포넌트를 파일로 쪼개는 방법 >>> 

- > 많은 components들을 .js 파일로 분리할 것

 

import React, { Component } from 'react';

// 리엑트라는 라이브러리에서 컴포넌트라는 클래스를 로딩한 것

 

export default TOC; // 외부에서 이 코드를 가져다가 쓸 수 있게 하기 위해서

.html 파일 위에 import TOC from "./components/TOS"; 써주면 된다.

 

state = props를 내부적으로 상태를 관리할 때 사용하는 것

props는 사용자에게 중요한 정보, 왜냐하면 사용자 입장에서 제품을 조작하는 장치=props

state는 props 값에 따라 내부 구현에 필요한 것.

좋은 제품이 되려면 철저하게 props와 state를 구분시켜놔야 한다.

 

컴포넌트가 실행될 때 constructor이라는 함수가 있다면 그것이 제일 먼저 실행돼서 초기화를 담당한다.

상위 컴포넌트인 App의 상태를 하위 컴포넌트(Subject)로 전달하고 싶을 땐 상위 컴포넌트의 state값을 하위 컴포넌트의 props의 값으로 전달하면 된다.

 

각각의 list는 key라는 props를 가지고 있어야 한다.

이상적인 부모 컴포넌트와 자식 컴포넌트의 state와 props의 관계는 부모 컴포넌트에서 state 값을 변경하여 사용하고 그 state값을 자식 컴포넌트의 props 값으로 넣어줘서 자식 컴포넌트가 state를 props로 넣어준 값을 사용할 수 있도록 해서 그 값을 사용하는 것이다.

 

<생각해볼 점>

 

1. JSX는 무엇일까요?

> react와 함께 사용되는 Javascript를 확장한 문법이다.

 

2. 컴포넌트는 무엇이고, 컴포넌트 단위로 개발하는 이유는 무엇일까요?

> 컴포넌트는 리액트의 기본단위로서 독립적인 기능을 수행하는 단위 모듈이다. 컴포넌트를 이용하면 재사용과 유지보수가 용이하다. 

 

3. state와 props는 무엇일까요?

> props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것이고 state는 컴포넌트 자기 자신이 가지고 있는 값이다.

 

4. 리액트 훅은 무엇일까요?

> Hooks는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 이번 과제를 하며 사용한 useState는 가장 기본적인 Hook으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해준다.