#95. React 개요

Vue나 Angular는 프레임워크

React는 라이브러리라고 함 => 거의 프레임워크랑 같음

=> 동적인 resource는 public에 넣어야 함. 패키지는 package에

 

 

https://ko.legacy.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

import logo from './logo.svg';
import './App.css';

function App() {

  const str = '안녕 나는 문자열이야~';
  const warningMsg = 'JSX안에서 변수를 사용할 때는 반드시 {}를 사용해야 함!!!';
  // alert(str);
  const warningMsg2 = '반드시 부모요소로 전체를 감싸줘야 함!!';

  const element = (
    <div>
      <div><img src="https://cdn.eyesmag.com/content/uploads/posts/2020/08/11/the-patrick-star-show-spongebob-squarepants-spin-off-1-516d0d4f-fcf0-4106-ab95-a407167fee2c.jpg" width="300px"></img></div>
      <div>"♬월요일 좋아~♪♬"</div>
    </div>
  );

  const style= {
    backgroundColor : 'lightgrey',
    fontSize : '33px'
  }

  return (
    <div className="App">
      
      <h1>* 리액트란??</h1>

      <div>
        U.I(User Interface)를 구현하기 위한 JavaScript 라이브러리 <br/>
        코드의 단위를 Component로 구분하여 컴포넌트를 조합해서 복잡한 UI를 구성할 수 있으며 <br/>
        SPA(Single Page Application)를 구현하기 위한 도구로 사용됨!!
        <h4>* 화면을 아름답게 만드는 것과 React는 전혀 연관리 없음!!</h4>

        리액트를 사용할 때는 보통 Node.js라는 JavaScript런타임을 설치하는데 <br/>
        이는 node.js에 포함된 NPM(Node Package Manager)라는 패키지 매니저 + JSX(Babel)문법을 활용하기 위함!
      </div>

      <br />
      <hr />

      <h1>JSX란?</h1>

      <p>
        JSX(JavaScriptXML)는 JavaScript + XML을 사용한 자바스크립트의 확장 문법 <br/>
        UI를 구현하기 위해 React와 함께 사용할 것을 권장하며 JavaScript의 모든 기능이 포함되어 있음! <br/><br/>


        JSX를 이용해서 JavaScript코드 내부에서 React의 "Element"를 생성할 수 있음!!!<br/>
        <br/>
        ReactElement란? <br/>
        Component를 구성하는 요소! <br/>
        화면에 기술할 요소를 작성하여 React가 브라우저 화면에 랜더링할 수 있게 만들어줌!! <br/><br/>
        특징 : 불변객체(마치 Java의 Spring) <br/><br/>
        
        React는 index.html안에 있는 root라는 아이디 속성값을 가진 div요소 안에 모든 요소를 관리 <br />
        일반적인 React애플리케이션은 하나의 root를 가지기 때문에 index.js에서 root.render()를 이용해서 element를 전달!
        즉, React의 UI를 변경하는 방법은 새로운 ReactElement를 만들고 root.render()에 전달하는 방법뿐!! <br/>

        리액트 문법 : React.createElement('h1', null, 'Hello React');
        <br/>
        JSX문법 &lt;h1&gt;Hello React&lt;/h1&gt;
        <br/>
      </p>
      <br/>
      <span>{str}</span>

      {/* 주석은 중괄호 안에서 이렇게 쓸 수 있음 */}
      
      <br/>
      <label>주의할 점! : {warningMsg}</label><br/>
      {element}
      {element}
      {element}
      {element}
      <label>주의할 점2 ~~ : {warningMsg2}</label>

      <br/><br/>

      <div>
        <h3>*ReactElement에 class속성과 Style을 부여하는 법!</h3>
        
        <p>
          JSX는 SML기반 기술이기 때문에 HTML에서의 class속성을 그대로 사용할 수 없음!<br/>
          className이라는 속성을 이용해서 Element의 class속성을 부여할 수 있음
        </p>

        <div className="area1">
          {element}
          App.css파일에 적용하고자 하는 스타일을 적용할 수 있음!
        </div>
        
        <div className="area2" style={{fontSize : '22px', backgroundColor : 'lightgreen'}}>
          style속성을 이용해서 스타일부여~
        </div>

        <div className="area3" style={style}>
          객체 형태로 만들어서 전달하는 것도 가능~
        </div>

      </div>

    </div>
  );
}


export default App;

 

 

React는 .jsx라는 확장자로 파일 생성

 

함수를 이용하여 Component를 정의!

(클래스는 비권장 - 공식문서에서도 비권장하고 있음)

함수를 만들어서 안에 내용을 넣고 함수명 앞에 

export default function Chap01(){ 내용~~ }

=> 파일마다 export default는 하나만 사용가능!

 

끌어다 쓸 js에서 return div className="App"안에 <Chap01 /> 해주면 import됨

 

 

SPA : Single Page Application => 검색은 잘 안됨(노출이 잘 안됨), 슬랙같은것, 그룹웨어 => React쓰면 편함

MPA : Multi Page Application