[ React 기초 ] React Node.js관계 and JSX란

[ Node.js React관계 ]

• Node.js는 자바스크립트 런타임 환경, React는 Dom을 조작하는 javaScript 라이브러리이다.
• Node.js 사용함으로써 React를 사용하기 쉽게 해주는 도구들을 내장하고 있는 오픈소스이자, JavaScript runtime 환경이다.
  ex) NPM 사용, 바벨 컴파일러 도구 추가 -> JSX사용 가능

  	1. Node.js 설치 시 npm, npx 패키지 설치됨 (React에 필요한 모듈다운 가능) 
  	2. Node.js는 바벨이라는 컴파일러 도구를 가져서 JSX(html in javaScript)문법사용 
  	3. webpack , Babel이 있는데, React는 변경 감지가 필요하다. 
  	-> 즉, 계속 돌리는 서버가 필요해서 react는 node.js 서버 위에서 계속 돌아갈 예정이다. 

[ JSX 문법 ]

1. class -> className 클래스명
2. 데이터 바인딩 {} (최대 장점)

- {변수명, 함수} 바인딩 가능 
- 이미지: import해와서 변수명을 넣어줌 <img src={imgFile}>, 
변수안넣고 일반 txt가능
- 클래스명, src, id..{}사용가능 <div className={posts}>
- style은 object형식으로 넣어야함. style={ {color: 'blue', fontSize: '30px'} }

[ JSX 표현/속성/객체 지정 ]

1. js 표현식을 넣을 수 있고, 함수를 호출한 결과도 넣을 수 있다.
2. JSX는 React요소를 생성한다.

function getGreeting(user) {
		if(user) {
			return <h1>Hello, {formatName(user)!}</h1>;
		}
		return <h1>Hello stranger</h1>
	}

3. js 함수 호출이 되어 js객체로 평가된다. (if, for사용가능)
4. 속성 지정

• 따옴표 ""를 통해 문자열 리터럴 속성 지정
• js표현 경우: 따옴표사용X
  그리고 JSX는 js에 가까우므로 카멜케이스로 명명 규칙 권장

5. 객체 지정 (react요소)
   React.createElement() 호출

    const element = React.createElement(
      'h1',
      {className: 'greeting'},
      'Hello, world!'
    );

    // Note: this structure is simplified
    const element = {
      type: 'h1',
      props: {
        className: 'greeting',
        children: 'Hello, world!'
      }
    };

[ 지울거 ]

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

function test1() {
  return  console.log("console check")
}
function App() {
  let posts = {color: 'blue', fontSize: '30px'}
  let divStyle = {width: '300px', height:'300px', backgroundColor : 'red',}
 
  return (
    <div className="App">
      <div className='black-nav'>
        <div style={posts}>React TEST</div>
      </div>
      <div style={divStyle}></div>
    </div>
  );
}

export default App;

참고자료

• 개인공부를 위해 자료를 정리하고 참고해보았습니다.
  https://reactjs.org/docs/introducing-jsx.html