Week8(React)

class형 컴포넌트는 현재 잘 쓰이지 않고 함수형 컴포넌트가 훨씬 더 중요하기 때문에, class형 컴포넌트의 내용은 읽어만 보고 따로 이곳에 정리하지 않을 계획이다.

---

모듈 불러오기(import)

import React from 'reat'

 

모듈 내보내기(export)

export default MyComponent;

---

 함수형 컴포넌트를 선언할 때 function 키워드를 사용하는 것과 화살표 함수 문법을 사용하는 것 간에는 큰 차이가 없다. 대부분의 예제들을 보면 화살표 함수 문법 보다는 function 키워드를 많이 사용한다. 내 생각에도 단순히 const로 component를 선언하는 것 보다는 function 키워드를 사용하는 것이 더 가독성이 좋은 방법이라 생각한다.

---

props 라는 키워드 하나로 parameter들을 모두 한번에 받아 올 수 있다.

---

children을 통해 태그 사이의 내용을 받아 올 수도 있다.

 

//App.js

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent>리액트</MyComponent>
};
   
export default App;

MyComponent 내에서 {props.children}을 이용하면 '리액트'를 가져올 수 있다.

---

<비구조화 할당>

const { name, children } = props;

이 내용은

const {name, children} = {name: props.name, children: props.children} 가 된다.

---

<배열 비구조화 할당>

 

const array = [1, 2];
const one = array[0];
const two = array[1];

는 이와 같이 비구조화 시킬 수 있다.

const array = [1, 2];
const [one, two] = array;

---

<useState>

const [message, setMessage] = useState('');

useState 함수의 인자에는 상태의 초기값을 넣어준다. 배열의 첫번째 원소는 현재 상태이고, 두번째 원소는 상태를 바꾸어 주는 함수이다. 

---

<이벤트를 사용할 때에 주의해야 할 사항>

 

1. 이벤트 이름은 카멜 표기법으로 작성

 

2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값으로 전달

 

3. DOM 요소에만 이벤트를 설정할 수 있다.

---

<여러 개의 input 관리하기>

 

const [username, setUsername] = useState('');
const [message, setMessage] = useState('');
const onChangeUsername = e => setUsername(e.target.value);
const onChangeMessage = e => setMessage(e.target.value);


const [form, setForm] = useState({
	username:'',
         message:''
});
const {username, message} = form;
const onChange = e => {
	const nextForm = {
    	...form,
        [e.target.name]: e.target.value
        };
     setForm(nextForm);
};

그냥 이렇게만 보면 위에 코드가 더 깔끔해보인다. 하지만, 만약 input이 2개가 아니라 수천개라고 생각한다면 아래 코드가 위 코드에 비해 비교할 수 없을 정도로 간단해질 뿐만 아니라, 가독성도 좋다. 이 때문에 항상 아래 코드처럼 작성하도록 노력해야한다.

---