[nomad coder] 리액트 기초 3

import React from 'react';
import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
// import Button from './Button';
import styles from './App.module.css'


function App(){
    const [counter, setCounter] = useState(0);
    const [keyword, setKeyword] = useState("");
    const onClick = () => setCounter(prev => prev + 1); 
    const onChange = (event) => setKeyword(event.target.value);
    
    useEffect( () => {
        console.log("search FOR", keyword)
    }, [keyword])

    useEffect(() => {
        console.log("counter is added")
    }, [counter])

    // const[ value, setValue ] = useState("Save Changes");
    // const changeValue = () => { setValue("Revert Value") }

    return(
        <div>
            <input
            value={keyword}
            type="text" 
            placeholder="Search here"
            onChange={onChange}></input>
            <h1 className={styles.title}> {counter}</h1>
            {/* <Button text={value} onClick={changeValue} fontSize={18}/> */}
            <button onClick={onClick}> Click me! </button>
        </div>
    );
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />)
reportWebVitals();

---

1. CSS 모듈화

 

 

Button.module.css

.btn {
    background-color: tomato;
    color: white;
    padding: 10px, 20px;
    border: 0;
    border-radius: 10;
}

index.js에서 다음과 같이 처리( 여기서 해당 컴포넌트는 Button.module.css 이다.)

import styles from "./해당컴포넌트.css"

<button className={styles.btn}>hi</button>

 

 

다음과 같이 클래스명 외에도, 무작위의 문자열을 합하여 클래스 네임을 생성해준다.

이는 곧 각 모듈의 클래스이름이 같더라도, 따로 적용을 시켜주기 때문에 직관적인 클래스 네임명을 계속해서

재사용할 수 있게 해준다.

---

2. useEffect

useState를 통해, 해당 값을 감시하고 해당 값이 변경될 때 마다 화면을 리렌더링 해주는 기능을 경험했다.

하지만 짧고 간결한 코드는 크게 상관 없겠지만, 매 번 화면이 렌더링 되는건 비효율적인 소스 사용을 초래하기 때문에

우리는 useEffect를 사용한다. 코드의 특정한 부분만 변했을 때, 원하는 코드들을 실행하도록 하는 것이다.

 

<input
        value={keyword}
        type="text" 
        placeholder="Search here"
        onChange={onChange}></input>

다음과 같은 코드가 있다고 하면, 여기서는 keyword라는 값을 변수로 담아오고 있다.

const [keyword, setKeyword] = useState("");
const onChange = (event) => setKeyword(event.target.value);

useState로 해당 값을 감시하고, onChange 함수를 통해 해당 값을 setKeyword로 갱신하며, 이를 통해 화면이 계속 렌더링된다.

 

하지만, 다른 동작을 할 때도 이 화면이 계속 렌더링 되고 있기때문에, 해당 input의 keyword가 갱신될 때만 렌더링되길 원하기에

다음과 같이 useEffect를 적용시킨다.

 

    useEffect( () => {
        console.log("search FOR", keyword)
    }, [keyword])

useEffect( function, 감시할 대상 ) 으로 이해하면 좋을 것 같다.

keyword 값이 변경될 때만, 해당 코드가 실행된다. 즉 리렌더링 되는 부분에서 제외되는(?) 느낌이다.

꼭 리렌더링 돼야 할 부분과 한 번만 불러오면 되는 부분(한 번만 불러오는 부분은 API같은 예시를 들 수 있다)을 구분하여

효과적으로 코드를 작성하면 효율적으로 데이터 소모양을 줄일 수 있다고 생각했다.