리액트> 요약(진행중)

JSX 문법 1. html에 class 넣을 땐 className

JSX 문법 2. 변수를 html에 꽂아넣을 때는 {중괄호}

function App(){

  var data = 'red';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
        <div className={data}>안녕하세요</div>
      </div>
    </div>
  )
}
온갖 곳에 {} 중괄호를 열어서 변수들을 집어넣을 수 있습니다.
href, id, className, src 등 여러가지 html 속성들에도 가능합니다.
위처럼 쓰면 <div className="red"> 이렇게 되겠군요.



JSX 문법 3. html에 style속성 넣고싶으면 

<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>


4. 변수 말고 , state 담기

이전 강의에서는 그냥 let posts = '어쩌구' 이렇게 변수에 데이터를 저장했었는데
리액트에선 변수 말고 state를 만들어서 데이터를 저장해둘 수 있습니다. 

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

function App(){
 
  let [a,b] = useState('남자 코트 추천');
  let posts = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>글제목</h4>
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}
맨 윗줄에 import {useState} from 'react' 하고 
원하는 곳에서 useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있습니다.
그리고 저장한 자료를 나중에 쓰고 싶으면
let [a,b] = useState('남자 코트 추천');
a 자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 됩니다. 


<참고>let 뒤에 저거 무슨 문법임
 
자바스크립트 destructuring 문법인데 
내가 array 안에 있는 데이터들을 변수로 쉽게 저장하고 싶으면 쓰는 문법입니다.

예를 들어서 ['Kim', 20] 이렇게 생긴 array 자료를 만들어놨는데
 Kim이랑 20이라는 자료를 각각 변수에 저장하고 싶으면
let array = ['Kim', 20];
let name = array[0];
let age = array[1];
대충 이렇게 해도 되는데 

====>

let [name, age] = ['Kim', 20]
요즘 사람은 이렇게 합니다.
그럼 각각 name = 'Kim',  age = 20 이라는 변수가 생성됩니다.
귀찮게 등호여러번 쓸 필요 없이 왼쪽 오른쪽 형식을 똑같이 맞춰주시면 자동으로 알아서 변수가 생성됩니다.

이게 변수만들 때 쓰는 destructuring 문법입니다.
익숙하지 않아도 리액트 사용을 위해 일단 외우는게 중요합니다.

그래서 리액트로 다시 돌아가서
useState()를 쓰면 그 자리에 [데이터1, 데이터2] 이렇게 생긴 이상한 array가 남습니다.
데이터1 자리엔 '남자 코트 추천'같은 자료가 들어있고 
데이터2 자리엔 state변경을 도와주는 함수가 들어있습니다. 

그 데이터들을 각각 변수로 빼고 싶으면 
let [a, b] = useState('남자 코트 추천')
이러면 되는 것일 뿐입니다. 

function App(){
  let [글제목, b] = useState('남자 코트 추천');
  return (
    <h4>{ 글제목 }</h4>
  )
}

<onClick 사용법>

<div onClick={ () => { 실행할코드 } }>

let [ 따봉, 따봉변경 ] = useState(0);  // useState(0); 0으로 초기화 , 저장하는 훅.(도구이름임)
// 따봉변경 = 따봉을 재랜더링하여 저장하는 함수
function App(){
  
  let [ 따봉 ] = useState(0);
  return (
    <h4> { 글제목[0] } <span onClick={ ()=>{ 따봉 = 따봉 + 1 } } >??</span> { 따봉 }</h4>
  )
}

<글내용 변경>
function App(){
  
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      글제목[0] = '여자코트 추천';
      글제목변경(글제목)
    } }> 수정버튼 </button>
  )
} 

==> 원본이 파괴됨

function App(){
  
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      let copy = [...글제목];                       // ★  ' = 글제목' 하면 원본과 같다 생각해 카피해주지않음.
      copy[0] = '여자코트 추천';               // 스프레드 연산자 ...는 배열이나 객체의 요소를 나열하여 새로운         글제목변경(copy) 배열이나 객체를 만드는 데 사용됩니다..
    } }> 수정버튼 </button>
  )
}

  <참고 div는 한덩어리로!>
return(
  <div>
    <div></div>
    <div></div>
  </div>
)
근데 html 코드짤 때 유의점이 있는데 
return ( ) 안에 두개의 html 태그 나란히 적기 이런거 안됩니다. 
return ( ) 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야합니다. 

===> 긴 코드를 넣어야 할때 function 으로 축약해서 넣는다.

function App (){
  return (
    <div>
      (생략)
      <Modal></Modal>
    </div>
  )
}

=> 변수로 만든다고 생각

function Modal(){
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

=> 축약 

let Modal = () => {
  return ( <div></div>) 
}

<주의점>

Component 만들 때 주의점 
1. component 작명할 땐 영어대문자로 보통 작명합니다.
2. return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없습니다.
3. function App(){} 내부에서 만들면 안됩니다. 
왜냐면 function App(){} 이것도 다시보니 컴포넌트 생성문법이죠?
component 안에 component 를 만들진 않습니다. 
4. <컴포넌트></컴포넌트> 이렇게 써도 되고 <컴포넌트/> 이렇게 써도 됩니다. 
5.Component로 쪼개지 말고 꼭 필요한 곳만 Component로 쪼개시길 바랍니다


<리액트에서 동적인 UI 만드는 step>

1. html css로 미리 UI 디자인을 다 해놓고
2. UI의 현재 상태를 state로 저장해두고
3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성


<닫힘, 열림 모달창>

let [modal, setModal] = useState(false);
= useState('닫힘');
= useState(0);

<리액트 if문>

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div className="app">
      (생략)
      {
        modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}

"글제목 누르면 모달 html을 보이게 해주세요" 라고 코드를 짜는게 아니라
"글제목 누르면 state를 조절해주세요" 

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div>
      (생략)
      <button onClick={ ()=>{ setModal(true) } }> {글제목[0]} </button>
      { 
         modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}

반대로 꺼달라 setModal(!modal) !true !false 여러가지 방법이있다

<map 함수>

기능 1. array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행해줍니다.

 var 어레이 = [2,3,4];
어레이.map(function(){
  console.log(1)
}); 

// 1이 3번 실행됨.

var 어레이 = [2,3,4];
var newArray = 어레이.map(function(a){
  return a * 10
});
console.log(newArray)

// [20,30,40] 이 출력됨

 let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  

function App (){
  return (
    <div>
      (생략)
      { 
        글제목.map(function(a){
          return (
          <div className="list">
            <h4>{ a }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }
    </div>
  )
}

==> 같은 표현 다른 방식 

글제목.map(function(a, i){
          return (
          <div className="list"> => <div className="list" key={i}> 
            <h4>{ 글제목[i] }</h4>
            <p>2월 18일 발행</p>


function App (){
  return (
    <div>
      (생략)
      { 
        글제목.map(function(a, i){
          return (
          <div className="list"> = > <div className="list" key={i}> 
            <h4 onClick={()=>{ 따봉변경(따봉+1) }}>{ 글제목[i] }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }
    </div>
  )
} 글제목 3개에 따봉이 3개가 카운터가 같이됨. 

※ 순서를 넣어줘야함 
<div className="list" key={i}> 

let [따봉, 따봉변경] = useState(0);
let [따봉1, 따봉변경1] = useState(0);
let [따봉2, 따봉변경2] = useState(0);

이렇게 3개 만든 다음에 각각 글마다 집어넣어주면 완성입니다. 

근데 이렇게 만들면 글이 10개가 있을 경우 10줄 작성할 것입니까


====>>>>> let [따봉, 따봉변경] = useState([0,0,0]);
근데 따봉이라는건 state니까 state 변경함수 써야합니다. 그리고 array자료니까 array 자료변경시 주의점도 신경써야겠군요. 

<h4> 
  { 글제목[i] } 
   <span onClick={()=>{ 
      let copy = [...따봉];
      copy[i] = copy[i] + 1;
      따봉변경(copy)  
   }}>??</span> {따봉[i]} 
</h4> 
// 글제목[0] = 0+ ,[1]=0+ ,[2]=0+ 따로 됨.
state가 array자료일 경우 복사부터 하고 

그거 수정하면 된다고 해서 그렇게 했습니다.