React setting 및 react 데이터바인딩

Setting

1. node.js설치
2. vs코드 설치
3. vs코드 터미널 실행

“npx create-react-app blog”명령문 실행

⇒”blog”라는 react 프로젝트가 생성

app.js는 메인페이지에 들어갈 html을 짜는곳

app.js는 메인페이지에 들어갈 html소스를 짜는 곳

실제 메인페이지는 public 디렉토리에 html파일임

app.js에 있는걸 index.html에 넣도록 명령을 해주고 있기 때문(index.js에 설정되어있음)

폴더별 설명

node_modules : 설치한 라이브러리를 모은 폴더

public : 웹사이트에 static파일 보관함(이미지 파일, 파비콘 등등)

src : 소스코드 보관함

package.json : 설치한 라이브러리 목록(npm으로 받은 라이브러리 목록들 자동 업데이트)

설치한 라이브러리를 모은 폴더

웹사이트에 static파일 보관함

소스코드 보관함

설치한 라이브러리 목록(npm우로 받은 라이브럴 목록들 자동 업데이트)

데이터 바인딩

function App() {

  let posts = 'test context';

  function testFun(){
		return 100;
  }

	return (
	    <div className="App">
	      <div className='black-nav'>
	        <div>개발 Blog</div>
	      </div>
	      <div className={posts}></div>
	      <img src={logo}/>
	      <h4> { posts } </h4>
	    </div>  
	  );
}

리엑트에서 데이터바인딩 하는 방법 {변수명, 함수 등}

데이터 바인딩은 src,className등 다양한 속성에 바인딩 할 수 있다.

JSX에서 style 속성을 집어넣을때

return (
    <div className="App">
      <div className='black-nav'>
        **<div style={ { color : 'blue', fontSize : '30px'} }>개발 Blog</div>**
      </div>
      <div className={posts}></div>
      <img src={logo}/>
      <h4> { posts } </h4>
    </div>  
  );

⇒JSX에서 style 속성을 집어넣을땐 object 자료형으로 작성해야함(속성명은 카멜케이스형태로 작성!! font-size ⇒ fontSize)

let posts = 'test context';
  function testFun(){
    return 100;
  }

  **let cssClass = { color : 'blue', fontSize : '30px'}**

  return (
    <div className="App">
      <div className='black-nav'>
        <div style={ { color : 'blue'} }>개발 Blog</div>
      </div>
      <div className={posts}></div>
      **<div className={cssClass}></div>**
      <img src={logo}/>
      <h4> { posts } </h4>
    </div>  
  );
}

⇒ 이런 형태로 style속성을 변수화 해서 사용도 가능