[ReactJS] TIL #2

State

state 기본적으로 데이터가 저장되는 곳을 뜻한다

 

ReactJS에서 업데이트되는 변수 나타내기

Vanilla JS 와의 차이

Vanilla JS 는 HTML 내의 요소가 업데이트될 때 그 요소의 부모들이 함께 업데이트되지만

React JS 는 바뀌는 요소만 업데이트 된다

 

React JS 에서 render을 하면 전체를 다시 생성한 후 교체할 것이라고 생각된다

그러나 render은 바뀐 부분만 새로 생성할 수 있게 한다

 

 

값을 업데이트하는 좋지 않은 방법

변수를 업데이트하였을 때 UI도 바뀌어야 하므로 rendering도 동반해야 한다

따라서 이 방법은 번거롭다

const root = document.getElementById("root");
let counter = 0;
//JSX는 중괄호 {} 안에 변수명을 넣어 변수를 사용한다
function countUp(){
    counter = counter + 1;
    render();
    // 변수 뿐만 아니라 UI도 업데이트하기 위해서는
    // re-rendering 해줘야 한다
}
function render(){
    ReactDOM.render(<Container />, root); 
}
const Container = () => (
    <div>
        <h3>Total Clicks: {counter}</h3>
        <button onClick={countUp}>Click me</button>
    </div>
);
render();

 

 

 

 

React.useState() 를 이용한 방법

이는 React JS 앱 내에서 데이터를 보관하고 자동으로 리렌더링을 일으킨다

 

 

React.useState() : 값과 그 값을 바꾸는 함수(modifier)를 배열로 얻을 수 있다

 

괄호 안에 값을 넣으면 값을 지정할 수 있다

(ex) const data = React.useState(7) 이면 data[0] = 7 이고, data[1] 은 이 값을 바꾸는 함수이다

 

modifier 함수는 값을 바꾼다

그리고 그 값이 바뀔 때마다 해당 컴포넌트만 재생성하고 리렌더링하여 UI를 refresh 한다 

 

 

React.useState() 를 이용한 버튼 클릭 수 세는 앱 만들기

const root = document.getElementById("root");
function App() {
    const [counter, setCounter] = React.useState(0); // 값과 modifier 함수에 이름 부여
    const onClick = () => {
        setCounter(counter + 1)
        // counter 값을 업데이트하고 렌더링한다
    }

    return (
        <div>
        <h3>Total Clicks: {counter}</h3>
        <button onClick={onClick}>Click me</button>
        </div>
    )
}
ReactDOM.render(<App />, root);

 

 

 

참고 사항

두 가지의 Component 생성 함수 작성법

const Container = () => (
    <div>
        <h3>Total Clicks: {counter}</h3>
        <button onClick={countUp}>Click me</button>
    </div>
);

// 이것과

const Container() {
	return (
        <div>
            <h3>Total Clicks: {counter}</h3>
            <button onClick={countUp}>Click me</button>
        </div>
    )
}

// 이것은 같다

 

 

배열의 요소에 이름 부여하기

const food = ["tomato", "potato"];
const ["myFavFood","mySecFavFood"] = food;
// myFavFood = tomato
// mySecFavFood = potato

 

 

React.useState()로 얻은 배열의 원소에 이름 부여하기

const [data, function] = React.useState(7);
// data = 7 , function = f