버튼을 클릭하면 명언이 나와요
-이름이 나와요
index.html 코드
<!DOCTYPE html>
<html lang="ko">
<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>리액트</title>
</head>
<body>
<noscript>자바스크립트를 실행해야 작동이 됩니다.</noscript>
<div id="root"></div>
</body>
</html>코드설명
1.해당 코드는 기본적인 HTML 구조를 가지고 있으며, React 애플리케이션을 렌더링하기 위한 준비를 하는 역할을 합니다.
2.<!DOCTYPE html>은 HTML 문서의 유형을 지정하는 선언문입니다. 이 경우, HTML5를 사용하고 있음을 나타냅니다.
<html lang="ko">은 HTML 문서의 언어를 한국어로 설정하고 있습니다.
3.lang 속성은 스크린 리더나 검색 엔진 등에서 문서를 이해하는 데 도움을 주는 정보를 제공합니다.
4.<head> 요소는 문서의 메타데이터와 스타일 시트 파일, 스크립트 파일 등의 외부 리소스를 정의하는 부분입니다.
5.<meta> 요소는 문서의 메타데이터를 지정합니다. 예를 들어, charset 속성은 문서의 문자 인코딩을 UTF-8로 설정하고, 6.http-equiv 속성은 브라우저가 호환성 모드로 동작하지 않도록 설정합니다. name과 content 속성은 문서의 뷰포트 설정을 지정합니다. 뷰포트는 반응형 웹 디자인에서 모바일 장치에서 웹 페이지를 올바르게 표시하기 위해 사용되는 영역입니다.
7.<title> 요소는 문서의 제목을 설정합니다. 브라우저의 탭 제목이나 검색 결과에서 표시됩니다.
8.<body> 요소는 문서의 본문을 정의하는 부분입니다. 웹 페이지에 실제로 표시되는 내용은 이 부분에 작성됩니다.
9.<noscript> 요소는 자바스크립트가 비활성화되었을 때 보여줄 내용을 정의합니다. 즉, 브라우저가 자바스크립트를 지원하지 않거나 사용자가 자바스크립트를 비활성화한 경우에만 해당 내용이 표시됩니다.
10.<div id="root"></div>는 React 애플리케이션을 렌더링할 때 사용할 빈 <div> 요소입니다. React가 해당 요소를 찾아서 그 안에 컴포넌트를 렌더링합니다. React 애플리케이션이 시작되면 이 요소는 동적으로 생성된 컴포넌트로 채워지게 됩니다.
11.따라서 위의 코드는 React 애플리케이션을 렌더링하기 위한 기본 HTML 구조를 가지고 있습니다.
index.js 코드
import React from "react";
import ReactDOM from "react-dom/client";
function Hello(props){
return (
<div>
<div>{props.title1}</div>
<div>{props.title2}</div>
<div>{props.title3}</div>
<div>{props.title4}</div>
</div>
);
}
const name = {
name: "An4",
text: "Hello",
author: {
name: "bdby",
url: "naver.com"
}
};
const root = ReactDOM.createRoot(document.getElementById("root"));
// root.render(<Hello title1={name} />);
root.render(<Hello title1={name.name} title2={name.text} title3={name.author.name} title4={name.author.text} />);코드설명
1.해당 코드는 React와 ReactDOM을 import하여 사용하는 React 컴포넌트입니다. 이 코드는 "Hello"라는 함수형 컴포넌트를 정의하고, 그 안에서 props를 통해 전달받은 값을 출력하는 역할을 합니다.
2.컴포넌트에서 props는 부모 컴포넌트로부터 전달받은 속성을 나타냅니다. Hello 컴포넌트에서는 title1, title2, title3, title4라는 네 개의 속성을 props로 받아와 사용하고 있습니다.
3.컴포넌트 내부에서 JSX 문법을 사용하여 화면에 출력할 HTML 구조를 작성하고, 해당 props 값을 출력하는 방식으로 동작합니다. 예를 들어, title1 props는 name 객체의 name 속성 값을 나타내고, title2 props는 name 객체의 text 속성 값을 나타냅니다.
4.name 객체는 다양한 속성을 가지며, author 객체는 name과 url 속성을 가지고 있습니다. 이러한 속성들을 사용하여 컴포넌트 내에서 다양한 데이터를 표시할 수 있습니다.
5.마지막으로, ReactDOM.createRoot를 사용하여 root라는 변수를 생성하고, root.render 메서드를 호출하여 Hello 컴포넌트를 화면에 렌더링합니다. title1, title2, title3, title4 속성을 통해 값을 전달하여 컴포넌트가 화면에 출력됩니다.
App.js 코드
import React from "react";
import ReactDOM from "react-dom";
function Hello(props){
return <h1>Hello, {props.name}</h1>
}
// <Hello></Hello> : 쓸 내용 있을때
// <Hello /> : 쓸 내용이 없으면
const element = <Hello name="An!!" />;
ReactDOM.render(element, document.getElementById("root"));
export default Hello;코드설명
1. function Hello를 선언합니다. 그리고 매개변수로 props를 받습니다.
| props | props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해주는 객체입니다. 리액트는 사용자 정의 컴포넌트로 작성한 엘리먼트의 JSX 속성과 자식을 해당 컴포넌트에 단일 객체로 전달합니다. |
2.props로 매개변수를 받으면 "props.이름"으로 받을 수가 있습니다.
3.ReactDOM.render(태그, 위치(root))을 적어주면
3.div태그인 root아이디를 찾아서 그 안에 내용을 넣습니다.
