고정 헤더 영역
상세 컨텐츠
본문
반응형
class ReactButton extends React.Component {
};
function ReactButton() {
};
// 대부분 화살표 방식으로 사용
const ReactButton = () => {};리액트 구성방식 3가지
- 리액트에서 사용할 방식중에 클래식방식, 함수 방식, 애로우 방식이 있습니다.
- 실무 및 현재 가장 많이 사용되는 방법은 애로우 방식으로 3번째 => 를 이용한 방식을 대부분 채택하고 있습니다.
<html>
<head>
<meta charset="UTF-8" />
<title>리액트</title>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script>
'use strict'
// 버튼컴포넌트
class ReactButton extends React.Component {
constructor(props) {
super(props)
this.state = {liked: false};
}
render() {
if (this.state.liked) {
return 'Whatever you want';
}
return React.createElement('button', {onclick: () => this.setsState({liked: true})},'Like');
}
}
</script>
<script>
// ReactDOM.render을 렌더하되 ReactButton을 root라는 id를 가진 요소에 생성하라
ReactDOM.render(React.createElement(ReactButton), document.querySelector('#root'));
</script>
</body>
</html>위의 코드가 실행되게 되면 아래의 오류가 발생하는데 현재는 리액트 18버전으로 업데이트 되어 이전 17버전을 사용할 수 없습니다.
- Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.
- 해결방법으로 업데이트 진행을 해야됩니다.
Tip - 객체주소를 함부러 바꾸지마라 (불변성)
- this.state = {liked: true};
- onclick: () => this.setsState({liked: true})},'Like'
setState를 통해 전환하지 않으면 state의 값 뿐만아니라 새롭게 다른 객체주소에 true가 저장되기 때문에 객체주소를 바꾸지 않고 값만 변환하고 싶다면 setState를 사용하는 것이 옳다.
자바스크립트 배열의 차이 (불변성)
const array[] = [1,2,3,4,5];배열을 직접적으로 수정
- pop, push, shift, unshift, splice
배열을 새로 만들어서 복사(추천!)
- concat, slice
<script>
// 자바스크립트 이벤트리스너 입력 방식
addEventListener('click', () => this.setState({liked:true}))
// 리액트 에로우방식 사용하여 짧게 구성
onClick={() => this.setState({liked:true})}
// Example
<button onClick={() => this.setState({liked:true})}>
Like React!
</button>
</script>
// 바벨라이브러리 사용시 <button> 태그를 변환해준다.
React.createElement('button', {onclick: () => this.setsState({liked: true})},'Like React!');
Example 부분의 button이 script 영역에서 해석될 수 있는 것은 바벨이라는 라이브러리를 통해 리액트 시초의 기본적인 형태로 변환해준다.
<script src="https://unpkg.com/babel/standalone@6/babel.min.js" crossorigin></script>
<script type="text/babel">
<button onClick={() => this.setState({liked:true})}>
Like React!
</button>
</script>바벨라이브러리 추가하고 해당하는 스크립트 부분에 타입을 지정해주면 완벽히 렌더링 된다.
<script type="text/babel">
// React17버전코드
ReactDOM.render(<ReactButton/>, document.querySelector('#root'));
// React18버전코드
ReactDOM.createRoot(document.querySelector('#root')).render(<ReactButton/>);
</script>리액트17버전과 리액트18버전의 랜더 방식의 큰차이는 없으며 단지 조금더 한국어에 가까운 문법형식이 보여진다.
1). ReactDOM에 ReactButton를 그려라, root라는 id값을 가진 요소에
2). ReactDOM에 root라는 id값을 가진 요소에 ReactButton를 그리겠습니다.
가장 큰 차이점은 리액트17버전은 'render'로 시작하고 리액트18버전은 'creatRoot'로 시작을 합니다.
// 주의사항!!
// input 태그는 반드시 뒤에 태그를 /를 통해 닫아주어야한다.
<input type="checkbox"/>
// HTML 태그 컴포넌트의 경우 반드시 대문자 R 로 시작하여야 한다.
class ReactButton extends React.Component { };
// HTML 태그의 앞글자는 반드시 소문자여야 한다.
<button type="submit" />
반응형
'웹 > React' 카테고리의 다른 글
| 리액트[React]_함수컴포넌트와 useState를 활용한 구구단 프로그램 만들기(feat. Fragment 활용) (0) | 2023.02.20 |
|---|---|
| 리액트[React]_DOM(Document Object Model)과 Document.ready와 Window.onload의 차이 (0) | 2023.02.18 |
댓글 영역