출처: https://bumcrush.tistory.com/182 [맑음때때로 여름]
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개가 아니라 수천개라고 생각한다면 아래 코드가 위 코드에 비해 비교할 수 없을 정도로 간단해질 뿐만 아니라, 가독성도 좋다. 이 때문에 항상 아래 코드처럼 작성하도록 노력해야한다.
Week10(React) (0) | 2020.11.27 |
---|---|
Week9(React) (0) | 2020.11.20 |
Week7(React) (0) | 2020.11.06 |
Week6(JavaScript) (0) | 2020.10.28 |
Week5(Javascript) (0) | 2020.10.17 |
댓글 영역