반응형
class 컴포넌트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>example</title>
</head>
<body>
<div id ="root"></div>
<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://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" integrity="sha512-kp7YHLxuJDJcOzStgd6vtpxr4ZU9kjn77e6dBsivSz+pUuAuMlE2UTdKB7jjsWT84qbS8kdCWHPETnP/ctrFsA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/babel">
class Component extends React.Component{
render() {
return (
return <div>hello</div>;
);
}
}
ReactDOM.render(
<Component /> , document.querySelector("#root")
)
</script>
</body>
</html>function 컴포넌트
//정의 1
function FunctionComponent(){
return <div>hello</div>;
}
// 사용
ReactDOM.render(<FunctionComponent />, document.querySelector("#root"))//정의 2
const FunctionComponent = () => <div>Hello</div>;
// 사용 2
ReactDOM.render(<FunctionComponent />, document.querySelector("#root"))
React.createElement로 컴포넌트 만들기
// React.createElement(
// type, //태그 이름 문자열 | 리엑트 컴포넌트 | React.Fragment
// [props], //리엑트 컴포넌트에 넣어주는 데이터 객체
// [...children] //자식으로 넣어주는 요소들
// );
// 1. 태그 이름 문자열 type
ReactDOM.render(
React.createElement('h1', null, `type 이 "태그이름 문자열" 입니다.`) ,
document.querySelector('#root')
);
//2. 리액트 컴포넌트 type
const Component = () => {
return React.createElement('p', null, `type 이 "React 컴포넌트" 입니다.`)
}
//(Component, null, null) 의미는 <Component> </Component> 는 <Component /> 와 같다.
ReactDOM.render(
React.createElement(Component, null, null),
document.querySelector('#root')
);
//3. React.Fragment
// 태그가 없음
ReactDOM.render(
React.createElement(React.Fragment, null, `type 이 "React Fragment" 입니다.`),
document.querySelector('#root')
);
//4. 복잡한 리액트 엘리먼트 모임
// <h1> 안녕하세요 </h1>
// <div><div> <h1>주제<h1> </div>....<li> </li> ... </div> 이런거.. 복잡하면 어떻게해? 복잡해!!
// jsx 사용
// 우리가 작성한 어떤 코드를 => 순수하게 실행할 수 있는 자바스크립트가 필요하다.
// babel CDN 추가하면 자동으로 변환해준다.
ReactDOM.render(
<div>
<div>
<h1>주제</h1>
<ul>
<li>React</li>
<li>Vue</li>
</ul>
</div>
</div>,
document.querySelector('#root')
);왜 JSX를 쓰냐
- React.createElement vs jsx 중에 가독성이 더 좋다.
- babel 과 같이 컴파일 과정에서 문법적 오류를 인지하기 더 쉽다.
JSX문법
- 최상위 요소는 1개
- 최상위 요소 리턴의 경우 , () 로 감싸야한다.
- 자식들은 바로 렌더링하고 싶으면 <> </>를 사용한다. => Fragment
- 자바스크립트 표현식을 사용하려면, {표현식}을 이용한다.
- if문은 사용할 수 없음/ 삼항연산자 or && 사용
- style을 이용해 인라인스타일링 가능
- class 대신 className 사용해 class적용
- 자식요소가 있음 </> 꼭 닫아야한다.
반응형
'개발(라이브러리,프레임워크) > react.js & react native' 카테고리의 다른 글
| Hooks (0) | 2022.01.09 |
|---|---|
| 라우팅 (0) | 2021.09.26 |
| 라이프사이클 (0) | 2021.09.23 |
| props 와 state (0) | 2021.09.23 |
| Firebase 연동 (0) | 2021.07.01 |
