오늘 한 일
리액트
nodebird 시작 전 리액트에 대한 기초 지식을 알고 가는 것이 좋을 것 같아 리액트 무료강의를 듣기 시작했다. state를 이용해 값도 바꿀 수 있는 것이 신기했다.
react 기본구조
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<!-- react component 정의 -->
<script type="text/babel">
// react 문법으로 작성 시
// const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props)
this.state = {
liked: false,
}
};
render() {
return (
// 1. react 문법으로 작성 ()
// e('button', {onClick : ()=>{this.setStats( liked: true )}, type="submit"}, this.state.liked === false : 'Like' ? "Liked");
// 2. JSX (js + xml)
<button type="submit" onClick={() => { this.setState({ liked: true }) }}>{this.state.liked === true ? 'Liked' : 'Like'}</button>
)
};
}
</script>
<!-- react DOM 연결 -->
<script type="text/babel">
ReactDOM.render(<div>
<LikeButton />
<LikeButton />
<LikeButton />
</div>, document.querySelector('#root'));
</script>
</body>
</html>- react 사용할 때는 html에 반드시
id=root인 div가 필요하다. webpack: 쪼개진 javascript, react 코드를 실행가능한 js파일로 만들어줌babel: 실험적인 js 문법들을(ex. JSX) 해당 코드 지원 안 하는 브라우저에서도 사용할 수 있게 바꿔 줌state: 컴포넌트에서 변경 가능한 요소들 (ex. 클릭 시 글자변경)- DOM html안에 구현된 함수를 클래스 메소드로 분리할 땐 반드시 화살표 함수 사용하기 (일반 함수로 구현하면 this가 가리키는 것이 달라짐)
- DOM 안 html요소 중 리액트 컴포넌트는 대문자로 시작 (ex. html
<button>, reactLikeButton)
<> 빈 태그
- 이전 리액트 단점: component도
<div>로 감싸줘야 해서 html 구조 복잡해짐 -> 빈 태그 사용<> </>-> 빈 태그 에러 시<React.Fragment></React.Fragment>대신 사용하면 html에는 div 표시 안 됨
DOM 직접 접근
- DOM에 직접 접근하고 싶을 때 (ex. input 값 바뀌면 focus하기):
ref={this.onRefInput}시용
input; // this.input 넣을 변수 생성
onRefInput = (c)=>{this.input = c; }이전 상태 이용
- 이전 상태값으로 현재 상태값 변경할 경우
setState()안에prevState를 인자로 받는 함수 구현해주기
// 이전 상태값에서 1 더해서 현재 상태로 바꾸기
this.setState((prevState) => {
return {
value : prevState.value + 1
};
});
문서화를 좋아하는 개발자