2장. JSX

리액트 에서는 JSX 라는 문법을 쓴다.

2.1 className

• 자바스크립트의 class 대신 className 이라고 쓴다.

2.2 데이터 바인딩이 쉽다.

• 중괄호 { } 를 쓴다.

{변수명}, {함수명()}, 
<img src={logo} />   // 주소를 쏼라쏼라 쓰는 것보다는 해당 형식으로 많이 쓴다.

• 엘리먼트(태그)내에 style 을 집어 넣을수 있다.
  but, 복잡하고 보기 안 좋아서 CSS 파일에 class를 만들어 쓴다.

{변수명}, {함수명()}, 
<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>

// font-size : 	속성명에 - 기호를 쓸수 없다. CamelCase 적용한다.

3장. state

3.1 state란?

• 변수 대신 쓰는 데이터 저장 공간

• 유동적으로 변할거 같은 데이터는 stats 저장공간에 담는다.

3.2 쓰는 방법

import React, { useState } from 'react';
// {useState} 를 추가한다. useState라는 함수를 쓰기 위하여.

function App(){
 
  let [글제목, 글제목변경함수] = useState('남자 코트 추천');    
  // useState('(추후 변경가능한) 데이터') 
  // useState 함수 의 결과물은 배열 [a,b] 의 형태가 된다.
  // 데이터는 객체, 배열 등 아무거나 가능
  // 글제목변경함수는 나중에......
  
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h3>{ 글제목 }</h3>
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

3.3 ES6, destructuring 문법

var [a,b] = [10,100];

var a = 10;
var b = 100;

let 으로 선언하면 안된다...왜지???

3.4 state 쓰는 이유

• 변수가 변경될 때 자동으로 관련된 HTML을 재렌더링되게 만든다.

3.5 좋아요 버튼 만들고 누를때마다 횟수 증가

import React, {useState} from 'react';
import './App.css';

function App() {
  
  let [title, titleFunction] = useState(['React','HTML','CSS'])
  let [count, countFuction] = useState(0)
  
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 블로그</div>
      </div>

      <div className='list'>글제목
        <h3>{title[0]}  <span onClick = {()=>{countFuction(count+1)}}> 😁 </span> {count} </h3>
        <p>2월 17일 발행</p>
        <button>change</button>
        <hr/>       
      </div>

      <div className='list'>글제목
        <h3>{title[1]}</h3>
        <p>2월 17일 발행</p>
        <hr/>      
      </div> 

      <div className='list'>글제목
        <h3>{title[2]}</h3>
        <p>2월 17일 발행</p>
        <hr/>      
      </div>

    </div>
  );
}

export default App;

풀이

 let [count, countFuction] = useState(0)

• count 라는 stste 변수를 만들었고 초기값으로 0을 주었다.

• count 를 변경시키기 위하여 함수 countFunction 이라는 함수 명을 만들었다.

• count 값을 변경시킬때는 countFunction(변경하고자하는값) 을 사용하여야 한다.( 완전히 대체해준다!!!)

return (
    <div className="App">
      <div className="black-nav">
        <div>개발 블로그</div>
      </div>

      <div className='list'>글제목
        <h3>{title[0]}  <span onClick = {()=>{countFuction(count+1)}}> 😁 </span> {count} </h3>
        <p>2월 17일 발행</p>
        <button>change</button>
        <hr/>       
      </div>

• <span> 태그를 사용하여 좋아요 이모티콘을 만들었다.

• 회수(count) 표현을 바로 뒤에 써주었다.

• 이모티콘을 클릭할 때 마다 이벤트를 발생시키기 위하여 onClick={실행 함수} 만들었다.
  자바스크립트 <div>
  JSX <div onClick={실행할 함수}>

• onClick{} 에 함수 틀을 넣어주고 onClick{( ) => { }}

<div onClick={ showModal }>  (showModal은 어디 다른데 만들어둔 함수 이름)
<div onClick={ function(){ 실행할 코드 } }>
<div onClick={ () => { 실행할 코드 } }>

• onClick{( ) => {countFunction(count+1)}} 변경 하고자 하는 값을 넣어주었다.
  count=count+1 식의 js 문법이 아니다!!
  count의 states 함수인 countFunction 을 사용하여야 한다.