오래 못 할 짓 하지 않기

[ React ] 2. React의 특징 본문

혼자하기/React

[ React ] 2. React의 특징

쫑알bot 2023. 9. 22. 17:31
728x90

리액트는 HTML을 굳이 생성할 필요없이

[ JS 작성 → HTML이 생성됨  ] 이런 구조이다.

자바 스크립트에서 시작해서, HTML로 끝낸다.

 

 

방법 1

 

자바 스크립트로 HTML들을 생성할 수 있다. 

= 굳이 HTML 태그들을 하나하나 끄적이면서 만들 필요가 없다.

그러나 위에 id = root 인 div하나 만들어놨음

 

<html>
    <body>
    <div id="root"></div>
    </body>
   
    <script>
        const root = document.getElementById("root");
        const abc = React.createElement("span" ,{
            id:"scrub",
            onMouseEnter: () => console.log("leave me alone")
        },"hello i'm span");

        const btn = React.createElement("button",{
            onClick: () => console.log("!!clicked!!"),
            style:{
                backgroundColor : "orange"
            }
        },"Click me");

        const container = React.createElement("div",null,[abc,btn]);
        ReactDOM.render(container,root);

    </script>

</html>
 

여기에서 스크립트 파트만 보자

 

 
 const abc = React.createElement("span" ,{
            id:"scrub",
            onMouseEnter: () => console.log("leave me alone")
        },"hello i'm span");
        
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ        
        
 const 하고싶은 이름 = React.createElement ("원하는 HTML 태그", { (이벤트)함수,style , id } , "태그 contents" ); 의 형태를 가지고 있다
 
 이렇게 설정하면, HTML 태그에 contents가 들어간다.

이렇게 설정할 수 있다.

 

그리고 

 

ReactDOM.render(container,root);

render라는 걸 해야한다. 안 하면 위에서 설정해도 안 뜸.

그냥 ' 화면에 띄운다 ' 라는 의미로 생각하면 될 것 같다.

 

하지만 render를 여러 개 만들기가 번거로우니 container라는 하나의 const 에 createElement를 하여

content를 넣는 칸에 원하는 변수들을 넣어준다.

 

 

근데 이것들은 거의 쓰지 않는다고 함!

 

 

방법 2

JSX

 

 

위에서 사용한 방법을 더 간단히 사용할 수 있다.

 

한 변(상)수 안에 필요한 요소들을 넣어주는 방법인데

 
 1. const abc = React.createElement("span" ,{
        id:"scrub",
        onMouseEnter: () => console.log("leave me alone")
    },"hello i'm span");

이렇게 있었던 구조에서

 

    2. const abc = (
        <h3 id="scrub" onMouseEnter={() => console.log("leave me alone")}>
          Hi guys it's Friday
        </h3>
      );

이런 구조로 바꿀 수 있다. 확실히 이게 더 직관적이고 보기가 편한 것 같다.

HTML 요소를 한 변수 안에 넣어주니 원래 알던 내용에서 더 안 변해서 좋은 듯, 어떻게 나올지도 예상이 감

 

 

아래와 같은 함수 형태로도 바꿀 수 있다.

  function Abc(){
        return (<h3 id="scrub" onMouseEnter={() => console.log("leave me alone")}>
          Hi guys it's Friday
        </h3>
      );

 

그리고 render를 담당하는 const인  container 도 간단히 바꿀 수 있다.

 

const container = React.createElement("div",null,[abc,btn]);

 

위 식에서

      const container = (
        <div>
          <Abc/>
          <Btn/>  
        </div>
      );

이런 형태로 바꿀 수 있는데, 여기서 주의할 점은

div 안에 들어가는 것들에서

함수는 <함수명/> 이고  ///  const나 변수는 {변수명}에 넣어준다

가능한 함수나 변수는 대문자로 하기, 아니면 기본 태그들인줄 알 수 있음.

 

 

'혼자하기 > React' 카테고리의 다른 글

[ React ] 4. Props  (0) 2023.09.26
[ React ] 3. 더 간단하게 만들기  (0) 2023.09.26
[ React ] 1. 리액트 기초 ( JS version )  (0) 2023.09.22
'혼자하기/React' Related Articles more