선행 학습 : HTML(화면 틀 스케치), CSS(틀 디자인), JavaScript(기능)
컴포넌트 : props(property : 속성, 부모 컴포넌트가 자식 컴포넌트에게 데이터 전달할 때에도 많이 사용함)를 입력받아서 React Element반환하는 형태로 동작함. 브라우저에 UI를 공급하기 위한 조각, 단위. class와 유사함. 항상 렌더링을 수행함.

what is React?

1. JS Library for UI rendering

React App은 js를 기반하여 html, css요소를 컴포넌트 단위로 조각내어 구성하고 브라우저에 제공하는 라이브러리 입니다. 컴포넌트 단위로 조각내게 되면 코드의 가독성 및 재사용성과 유지보수가 향상됩니다.

2. 서버사이드 랜더링 및 클라이언트 랜더링 모두 지원

랜더링: 유저가 볼 화면을 제공하는 행위입니다.
이를 서버가 처리하느냐, 클라이언트(유저)의 브라우저가 처리하느냐에 따라 나뉩니다.

서버 사이드 랜더링 : 유저가 화면을 요청할 때마다 즉각적으로 서버에서 화면을 가공하여 제공하므로 상대적으로 첫 화면 제공 속도가 빠르며 SEO(검색 엔진 최적화) 가능합니다.

클라이언트 랜더링 : 유저가 볼 화면을 유저의 브라우저가 가공하므로 요청에 대해 빠른 응답을 할 수 있지만, 첫 접속 시에는 서버에서 웹에 대한 자료를 다 받와야해서 첫 화면 제공속도가 상대적으로 느리며 SEO최적화가 불가능합니다.

이 둘을 모두 지원하므로 각각의 장점만을 취할 수 있습니다.

3. node.js와 함께 사용하면 jsx를 사용하여 생산성을 향상 할 수 있다.

jsx는 js를 확장시킨 문법으로, html+js처럼 보입니다. 코드 길이도 간결해지며 우리가 아는 html 태그 형식대로 사용할 수 있게되어 가독성과 유지보수 측면에서 좋습니다.

//아래는 hello world를 출력하기 위한 js코드이다
class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello world`);
  }
}

//마찬가지로 hello world를 출력하기 위한 jsx코드이다.
class Hello extends React.Component {
  render() {
    return <div>Hello world</div>;
  }
}

Codepen을 이용하여 학습

1. settings에서 Preprocessor에 Babel 셋팅 및 react와 react-DOM 라이브러리 추가하기
   

상단 이미지의 빨간 동그라미 안의 톱니바퀴 클릭합니다.

JS클릭 한 후 JavaScript Preprocessor 칸을 클릭하면 dropbox가 나타나는데, Bable(JSX 지원)을 클릭합니다.
돋보기 아이콘 있는 칸에 react 입력하여 검색 후
react(컴포넌트 지원), react-dom(랜더링 지원) 클릭하여 추가합니다.

Hello React! print

//<html코드>

<div id="root"></div>


//<js코드>

//extends == 자바와 같은 기능
class HelloReact extends React.Component {
  //render함수를 호출해서 원하는 내용으로 작성
  render(){
    //화면 출력값 기재
    return (  
      <h1>Hello React!</h1>
    )
  }
}

//작성한 render함수를 호출하면서 파라메터로 실행할 class명과 html아이디를 주입. 
//해당 html Id를 가진 요소의 화면 출력값은 HelloReact Class가 됨.
ReactDOM.render(<HelloReact/>, document.getElementById('root'));

출력 성공!

참조: https://react.dev/learn/describing-the-ui
참조: https://edu.goorm.io
(React와 Node.js를 활용한 고객 관리 시스템 개발)