JSX

Happhee·2021년 10월 22일
0

💙  React 💙

목록 보기
11/18
post-custom-banner

node_modules : 라이브러리 모은 폴더
public : static 파일 보관함
src : 소스 코드 보관함
package.json : 설치한 라이브러리 목록

src -> index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

src -> App.js

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

function App() {
  return (
    <div className="App">
    
    // 여기에 평소 웹 만들던것처럼 HTML 코딩을 진행하면 된다.
    
    </div>
  );
}

export default App;

public -> index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

  
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
    	//여기에 App.js 들어와진다!!!!!!!
    </div>
  </body>
</html>

jsx 에서는
class 말고 classNmae으로 지정해야함!
왜냐면 class가 이미 js에 정의되어있기 때문이다.

App.js

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

function App() {
 return (
   <div className="App">
     <div className="black-nav">
       리액트 적응하기 1일차
     </div>
   </div>
 );
}
export default App;

App.css

 .App {
  text-align: center;
}
body{
  font-family: 'nanumsquare';
}

.black-nav {
  background: black;
  width: 100%;
  display: flex;
  color: white;
  padding: 20px;
  font-weight: 600;
  font-size: 20px;
}

리액트를 쓰는 이유

그렇다면 왜 리액트를 쓰는 것인가,,?

데이터 바인딩

데이터 바인딩이 쉽다!!
데이터 바인딩 : 데이터를 HTML에 꽂아넣는것
중괄호 !!!!!!!!!
{변수명, 함수 } 으로 한번에 바인딩이 된다.
src, id, href 등의 속성에도 { 변수명, 함수 등 } 적용 가능
상상하는 모든 곳에 { } 로 변수 집어넣기 가능

js

document.getElementById().innerHTML = "binding"

react

function App() {
  
  let server_data = '서버 데이터';
  function ten(){
      return 10
  }

  return (
    <div className="App">
      <div className="black-nav">
        리액트 적응하기 1일차
      </div>
      
      <div className = {server_data} >
        서버 데이터 클래스 이름 
      </div>
      <img src ={ logo }/>
      <h3> {  server_data  }</h3>
      <h4>{ ten() }</h4>
    </div>
  );
}

JSX style 속성

오브젝트 형식으로 넣어야 한다
style = { object 자료형으로 만든 스타일 }
여러개일 경우 콤마로 구분!
camelCase 작명 습관을 따라서 자스에 있는 - 기호를 다 바꿔주어야 한다.

<h3 style = {
        { color : 'purple',
          fontSize : '20px'
        } 
      }> 
              {  server_data  }</h3>
function App() {
 
  let server_data_style = { color : 'purple', fontSize : '20px'}; 
  let server_data = '서버 데이터';


  return (
    <div className="App">
      <div className="black-nav">
        리액트 적응하기 1일차
      </div>
      <img src ={ logo }/>
      <h3 style = { server_data_style } > {  server_data  }</h3>
    </div>
  );
}

state

리액트에서 데이터는
변수에 넣거나 state에 넣거나 둘 중 하나 인데 !!!
state를 사용하여 쓰는 것이 대부분이다.
1.변수 대신 쓰는 데이터 저장공간
2.useState()를 이용해 만들어야 함

  1. {useState} 상단에 첨부
  2. useState(data)

참고) ES6 destructuring 문법
array, object에 있던 자료를 변수에 쉽게 담고 싶을때

var [ a, b ] = [10, 100];
  let [array, fun ] = useState('core');
import './App.css';
import React, {useState} from 'react';
//내장 함수를 가져다 쓰겠습니다~

function App() {
  let [ title , title_modify ] = useState(['CORE', 'Student']); // [array , fun ]
  //state데이터, state데이터 변경 함수 

  return (
    <div className="App">
      <div className="black-nav">
        리액트 적응하기 1일차
      </div>
      <div className= "list" >
        <h3> {  title[0] }</h3>
        <p> 2021년 10월 22일 </p>
        <hr/>
      </div>
      <div className= "list" >
        <h3> {  title[1] }</h3>
        <p> 2021년 10월 22일 </p>
        <hr/>
      </div>
    </div>
  );
}

export default App;

state에 데이터를 저장해놓는 이유

웹이 App처럼 동작하게 만들고 싶어서
그리고
state는 변경되면 HTML이 자동으로 재렌더링이 된다
따라서 자주 바뀌고, 중요한 데이터 는 변수 말고 state로 저장해서 써야 함

profile
즐기면서 정확하게 나아가는 웹프론트엔드 개발자 https://happhee-dev.tistory.com/ 로 이전하였습니다
post-custom-banner

0개의 댓글