- React JS 설치를 위한 Javascript 코드 Url
https://unpkg.com/react@17.0.2/umd/react.production.min.js
https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
React JS는 html코드를 직접 작성하지 않고 그 대신, javascript코드를 사용한다.
Javascript와 React JS를 이용하여 element를 생성한다.
- React JS element를 어떻게 생성하는가?
React를 import했다는 가정하에 (위의 URL 참고)
const span =React.createElement("span");createElement function을 가진 React object에 접근 가능. (예로써, "span")
- 다음으로, 어떻게 body 안에 React element를 가져다 둘 수 있는가?
‘React-dom’을 사용해야 한다.
React JS는 어플리케이션이 아주 interactive하도록 만들어주는 library이고,
React-dom은 library, 또는 package인데 모든 React element들을 HTML body에 둘 수 있도록 해준다.
ReactDOM.render(span,root);
render의 의미는 React element를 가지고 HTML로 만들어 배치한다는 것이다. ( render의 의미 == ‘사용자에게 보여준다’)
( )안에 무엇(span)을 render 할 것인지, span을 어디에(root) 둘 것인지를 reactDom에게 알려주어야 한다.
이를위해, <body></body>안에 id=root인 div요소를 만들었고,
<div id="root"></div>
이를 읽기위해, #root를 js로 불러왔다.
<script>
const root =document.querySelector("#root");
</script>
정리하면,
const span =React.createElement("span"); //이 코드로 element를 만들고,
ReactDOM.render(span,root); //이걸로 root안에 넣었다.
interactive한 어플리케이션에서 하는 작업은 결국 event들을 감지하는 일인데, addEventListener를 반복하는 것 대신에 property에서 event를 등록할 수 있다.
React.createElement("span", {span의 property}, “span의 content”)
// property는 class name, id, style 등 가능하다.
- 참고
react18에서는 ReactDOM.createRoot(root).render(span); 이렇게 사용합니다.
17버전 - ReactDOM.render(span, root)
위 예제를 통해 알 수 있는 것은
Javascript와 React JS를 사용하여 element를 생성할 때에는, React JS가 element를 생성한다. React JS는 업데이트가 필요한 element를 업데이트한다. 이는 React JS가 결과물인 HTML 을 업데이트할 수 있다는 것을 의미한다.
---> React JS는 유저에게 보여질 내용을 컨트롤 할 수 있다는 뜻이다.
React JS로 element를 생성하는 위의 방식은 개발자들이 잘 쓰지 않는 방식이다. element를 생성하는 다른 방식이 존재한다. 그러나 이 방법을 ‘이해’해야 할 필요는 있다. React JS의 본질을 이해할 수 있을 것!
- React element를 생성하는 더 편리한 방법을 알아보자.
Babel은 JSX를 React.createElement() 호출로 컴파일한다.
즉, Babel은 JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔준다.
다음 두 예시는 동일합니다. (위 - JSX , 아래 - JSX를 Babel이 변환한 코드)
const element = ( <h1 className="greeting">Hello, world! </h1> );const element =React.createElement('h1', {className: 'greeting'}, 'Hello, world!' );
주의! JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다. 예를 들어, JSX에서 class는 className가 되고 tabindex는 tabIndex가 됩니다.
- 컴포넌트를 다른 컴포넌트에 안에 넣었다.
기억할 점은, 직접 만든 컴포넌트를 렌더링해서 다른 곳에서 사용할 때는 항상 대문자로 시작해야 한다
<script>
const Title = () =>(
<h3
id="title"
onMouseEnter={() =>console.log("mouse enter")}
>
Hello I'm a title
</h3>
);
const Container = () =>(<div> <Title/> </div>);
// div태그를 렌더링하고 있는 컴포넌트가 하나있는데, Title에 관련된 코드를 포함시키고 있는 것.
</script>
- 그렇다면 React Element를 함수안에 왜 담는가? 무슨 이점이 있어서?
React Element를 함수 내에 담으면 원하는 만큼 사용할 수 있게 된다.
<div> <Title/> </div>Title이라는 함수는 h3 React Element를 반환하고 있고,
<Title/><Title/><Title/>
//이를 원하는 만큼 사용할 수 있게 된다.
함수의 형태이기 때문이고, 동일한 코드를 재사용할 수 있는 방법이다.
'Study > Code' 카테고리의 다른 글
| [JS] 웹 상에 존재하는 UI 만드는 법 (0) | 2023.07.03 |
|---|---|
| 자바스크립트 조작 방법 (0) | 2023.07.03 |
| [23_1 웹응용프로그래밍 팀프로젝트] GitHub 활용 (1) | 2023.06.01 |
| [23_1 웹응용프로그래밍 팀프로젝트] 초기 설정 단계 (0) | 2023.06.01 |
