[React] 🍎 기초정리

🦋JSX

• JS안에서 HTML을 쉽게 쓸수있는 부가기능

🦋 JSX문법 3가지

function App() {

  let post =  '강남 우동 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <h4 style={{color:'red',fontSize:'16px'}}>블로그임</h4>
      </div>
      <h4>{post}</h4>
    </div>
  );
}

export default App;

1.class대신 className으로 쓴다.
2.html에 데이터꽂아넣을 때(데이터 바인딩)는 {변수명}
3.style넣을때는 style={{color:'red',...}}

• return안에는 병렬로 태그 2개이상 기입금지 return(<></><></>) 이러면 안됨

🦋 state

function App() {

  let post =  '역삼 우동 맛집';
  let titleArr = ['남자코트 추천','강남 우동맛집','파이썬독학']
  let [title,setTitle] = useState(titleArr);
  let [logo, setLogo] = useState('ReactBlog');

return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
        {title.map(el => 
          <div className='list'>
            <h4>{el}</h4>
            <p>2월 17일 발행</p>
          </div>
        )}
    </div>
  );
}

• 자료를 잠깐 저장할땐 변수를 쓴다.
• 근데 변수를 변경한다고 return안에 html이 리렌더링되진 않는다.
• 변수를 바꿀때마다 html이 리렌더링되게 하고싶으면 state를 써야한다.
• App() 안에서 useState 치고 엔터치면 알아서 import된다.

🦋 onClick, setState

/* eslint-disable */ 
import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {
  let post =  '역삼 우동 맛집';
  let [글제목,글제목변경] = useState(['독감','강남 우동맛집','파이썬독학']);
  let [따봉,따봉변경] = useState(0);
// state변경함수 특징 : 기존 state와 신규 state가 같으면 변경안해줌
// array/object 특징 : 변수엔 주소값만 저장됨. 값은 ram에 저장됨
return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>

      <button>가나다순정렬</button>
      <button onClick={() => {
        let copy = [...글제목];
        copy[0] = '여자코트 추천';
        글제목변경(copy);
      }}>글수정</button>
      <div className='list'>
        <h4>{글제목[0]} <span onClick={() => { 따봉변경(따봉+1)}}>👍</span> {따봉} </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className='list'>
        <h4>{글제목[1]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className='list'>
        <h4>{글제목[2]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>

    </div>
  );
}

export default App;

0. eslint-disable 로 warning 무시할 수 있다.
1. 눌렀으면 좋겠는 태그안에 onClick을 넣는다

• onClick={}안엔 함수이름을 넣어야한다.
• onClick안에다가 함수만들기 귀찮을 땐 () => {js코드} 로 넣고는 함

2. state를 변경하려면 setState(새로운state) (따봉=1) 이런 재할당은 안됨, state를 갈아치운다는 느낌으로
3. state변경함수 특징 : 기존 state와 신규 state가 같으면 변경안해줌
4. array/object 특징 : 변수엔 주소값만 저장됨. 값은 ram에 저장됨

🦋 Component 문법

      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>

이런코드가 너무길어지면 html이 더러워진다.

	<Modal></Modal>

이렇게 하면 가독성이 좋겠다

/* eslint-disable */ 
import './App.css';
import { useState } from 'react';

function App() {
  
  let [글제목,글제목변경] = useState(['독감','강남 우동맛집','파이썬독학']);
  let [따봉,따봉변경] = useState(0);

return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>

      <button>가나다순정렬</button>
      <button onClick={() => {
        let copy = [...글제목];
        copy[0] = '여자코트 추천';
        글제목변경(copy);
      }}>글수정</button>
      <div className='list'>
        <h4>{글제목[0]} <span onClick={() => { 따봉변경(따봉+1)}}>👍</span> {따봉} </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className='list'>
        <h4>{글제목[1]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className='list'>
        <h4>{글제목[2]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <Modal></Modal>
    </div>
  );
}

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

export default App;

Component 만드는법
1. function만들고(다른 컴포넌트 밖에 만들어야함)
2. return()안에 html담기
3. <함수명></함수명> 쓰기 <함수명 />도 가능

어떤걸 컴포넌트로 만들면 좋은가
0. const Modal = () => {return ~} 로 만들어도 됨
1. 반복적인 html 축약할 때
2. 큰 페이지 하나를 컴포넌트화 할때
3. 자주변경되는 ui같은것

굳이 html을 병렬기입하려면 <> </>으로 div를 병렬로 둘수있음
컴포넌트화하는게 단점은 있음
App()에서 선언한 state를 Modal()에선 못씀
너무 복잡하다 싶은것만 컴포넌트화하도록 하자