[React] JSX와 state, onClick, Component (코딩애플 유튜브 무료강의)

유튜브 코딩애플 수업 듣는 중

 

JSX 문법

• class 넣을 땐, className
• 변수 꽂을 땐(== 데이터 바인딩), {변수명}
• style 넣을 땐, style={{ 이름: '값' }}

import './App.css';

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;

.App {
  text-align: center;
}

.black-nav {
  display: flex;
  background: black;
  width: 100%;
  color: white;
  padding-left: 20px;
}

 

 

※ 리턴 소괄호 안에는 무적권 하나의 태그만 있어야함

 

---

 

state

리액트에서 자료를 잠깐 저장할 때 사용함

import { useState } from 'react';

let [a, b] = useState('어쩌구 저쩌구');

a : state에 보관했던 자료

b : state 변경을 도와주는 함수

 

▼ 변수문법이 있는데 왜 state를 씀?

일반 변수는 갑자기 변경되면 html에 자동으로 반영이 안됨

state는 갑자기 변경되면 html이 자동 재랜더링 됨

따라서, 변동이 있을 때 자동으로 html에 반영되게 만들고 싶을 때 state를 사용함

→ 자주 변경될 것 같은 부분에 사용하기

 

 

---

 

onClick

/* eslint-disable */ // 워닝메세지 지워주는거

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

function App() {

    let [글제목, b] = useState(['쪼랭', '부추', '몽청']);
    let [따봉] = useState(0);

    function 함수() {
        console.log(1);
    }

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

            <div className='list'>
                <h4>{ 글제목[0] } <span onClick={ 함수 }>👍</span> {따봉} </h4>
                <p>03월28일 발행</p>
            </div>
            <div className='list'>
                <h4>{ 글제목[1] } <span onClick={ function() { console.log(1) } }>👍</span> {따봉} </h4>
                <p>03월28일 발행</p>
            </div>
            <div className='list'>
                <h4>{ 글제목[2] } <span onClick={ () => { console.log(1) } }>👍</span> {따봉} </h4>
                <p>03월28일 발행</p>
            </div>

        </div>
    );
}

export default App;

 

 

---

 

▼ state 변경 함수 특징

기존 state == 신규 state 의 경우에는 변경 안해줌 (검사를 한번 거침)

 

▼ 자바스크립트에서의 [array나 object] 특징

array나 object를 담은 변수에는 그게 어디에 저장되어있는지 알려주는 화살표만 저장함

변수1과 변수2의 화살표가 같으면 변수1 == 변수2를 비교해도 ture가 나옴

 

▼ [...어쩌구] 의 ...

화살표를 새로 바꿔달라는 뜻

괄호를 벗겨달라는, 그다음에 다시 괄호를 씌워달라는 문법

 

기존 state가 array나 object 데이터라면, 독립적인 카피본을 만들어서 수정해줘야 함

 

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

function App() {

    let [글제목, 글제목변경] = useState(['쪼랭', '부추', '몽청']);
    let [따봉, 따봉변경] = useState(0);

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

            <button onClick={() => {
                let copy = [...글제목];
                copy[0] = '냥아치';
                글제목변경(copy);
            }}>글 수정</button>

            <button onClick={() => {
                let sort = [...글제목.sort()]
                글제목변경(sort)
            }}>오름차순정렬</button>

            <div className='list'>
                <h4>{글제목[0]} <span onClick={() => { 따봉변경(따봉 + 1); }}>👍</span> {따봉} </h4>
                <p>03월28일 발행</p>
            </div>
            <div className='list'>
                <h4>{글제목[1]}</h4>
                <p>03월28일 발행</p>
            </div>
            <div className='list'>
                <h4>{글제목[2]}</h4>
                <p>03월28일 발행</p>
            </div>

        </div>
    );
}

export default App;

 

---

 

Component

▼ Component 만드는 방법

function을 만들고 return() 안에 html 담기 → <함수명 /> 쓰기

function은 다른 함수 바깥에 영어 대문자로 시작하게 만들어야 함

 

언제쓸까

1. 반복적인 html을 축약할 때

2. 큰 페이지들

3. 자주 변경되는 것들

 

그런데 state를 가져다 쓸 때 문제가 생길 수 있음

 

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

function App() {

    let [글제목] = useState(['쪼랭', '부추', '몽청']);
    let [따봉, 따봉변경] = useState(0);

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

            <div className='list'>
                <h4>{글제목[0]} <span onClick={() => { 따봉변경(따봉 + 1); }}>👍</span> {따봉} </h4>
                <p>03월28일 발행</p>
            </div>
            <div className='list'>
                <h4>{글제목[1]}</h4>
                <p>03월28일 발행</p>
            </div>
            <div className='list'>
                <h4>{글제목[2]}</h4>
                <p>03월28일 발행</p>
            </div>

            <Modal />

        </div>
    );
}

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

// 방법 2
const Modal = () => {
    return (
        <div className='modal'>
            <h4>제목</h4>
            <p>날짜</p>
            <p>상세내용</p>
        </div>
    )
}

export default App;