시작하기 전, 복습을 해보자. (혹시나 내가 이해 못할까봐 남기는 글)
1. 컴포넌트나 JSX에 변수를 추가하고 싶을 땐
function Container() {
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
}{counter}를 추가해주는 것이다.
- 만약 UI를 업데이트하고 싶을 땐(사용자에게 변화를 보여주고 싶을 때)
function render() {
ReactDOM.render(<Container />, root);
}render 함수를 다시 호출하면 된다.
위 두 가지 코드가 합쳐진다면 아래와 같고,
function render() {
ReactDOM.render(<Container />, root);
}
function Container() {
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
}
render();마지막에 render();를 넣어줘서 페이지가 처음 실행될 때 호출해줬다.
render가 최초로 호출될 때, render(); 함수는 <Container /> 컴포넌트를 root div에 담아줄 것이다.
ReactDOM.render(<Container />, root); 이 함수가 최초로 호출되면
function Container() {
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
}container 함수가 호출되고, 그 다음 React Element가 반환될 것이다.
이 React 요소는 Total click과 우리가 추가해준 변수(counter)를 가지고 있다.
하지만 이 함수를 처음 호출했기 때문에 counter는 0일 것이다.
그리고 우리가 onClick이라는 이벤트리스너를 등록해주었다. 버튼을 클릭할 때마다 counter가 증가된다. 그리고 사용자에게 바뀐 데이터를 보여주기 위해서 render 함수는 다시 한 번 render();로 호출해 주어야 한다.
그럼 다시 이 render 함수 ReactDOM.render(<Container />, root);는 <Container /> 컴포넌트를 root에 담아줄 것이다.
하지만 이번에 countUP에서 render 함수를 호출할 때에는 <Container /> 컴포넌트가 바뀐 counter값(1, 2, 3, 4...)을 가지고 업데이트 될 것이다.
1. 자동 렌더링이 필요한 이유
우리는 render 함수를 다시 호출해주면 새로운 전체 container 컴포넌트를 생성할 것이라고 생각하지만 React.js는 똑똑해서 우리가 새로 렌더링하더라도, 전체를 전부 재생성하지 않고 필요없이 바뀐 부분만 새로 생성할 수 있게 해준다.
하지만 여기서 문제가 있다. 먼저 container를 app으로 바꿔보자.
function App() {
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
}
```ReactDOM.render(<App />, root);```문제는 데이터가 바뀔 때마다
render()함수를 호출하는걸 잊어서는 안 된다.
우리는 counter가 0인 시점에서 최초로 렌더링을 할 것이다. 그리고 counter 값을 증가시킬 때 리렌더링 하려고 한다.
ReactDOM.render(<App />, root); 이 함수를 계속 불러줄 필요 없이 react.js 어플 내에서 데이터를 보관하고 자동으로 리렌더링을 일으킬 수 있는 최고의 방법을 배워보자.
이걸 하는 이유는 우리가 만약 사용자에게 업데이트 된 걸 보여주고 싶으면 새로운 정보를
가지고 컴포넌트를 리렌더링 해줘야 하기 때문이다.
2. useState
우리는 매번 let counter 같은 변수에 데이터를 담았다.
react.js는 기능을 사용할 수 있는 룰이 있다.
function App() {
const data = React.useState();
return (
<div>
<h3>Total clicks: 0</h3>
<button>Click me</button>
</div>
);
}useState()를 쓰는 것이다. console.log 해보면 Array를 하나 받는다.
[undefined, f]바로 undefined 값과 f 함수를 지닌 배열. undefined 값은 data이고, f 함수는 data를 바꿀 때 사용하는 함수이다.
React.useState의 초기값을 설정할 수 있는데, 괄호 안에 값을 넣어주는 것이다.
function App() {
const data = React.useState(0);
return (
<div>
<h3>Total clicks: 0</h3>
<button>Click me</button>
</div>
);
}[0, f]초기값인 0과 이 data의 값을 바꿀 수 있는 f 함수가 들어있는 배열(array)을 얻었다.
복잡하게 생각하지 말고 어떤 역할을 하는지만 기억하면 된다.
우리한테 counter 라는 data를 주고, 그 counter 값을 바꿀 수 있는 함수를 주고 있다.
const data = React.useState(0);이 코드가
let counter = 0;
function countUp() {
//code
}이 코드랑 똑같은 역할을 하는 것이다.
하지만 배열 상태 그대로 보는 것은 불편하다. 왜냐하면 만약 h3에서 첫 번째 요소((0))를 사용하려고 하면 <h3>Total clicks: {data[0]}</h3> 이렇게 해주어야 한다. 이렇게 해도 잘 작동은 하지만 보기 좋지 않다.
JavaScript가 가지고 있는 아주 짧은 문법이 있다.
3. 배열에서 요소 꺼내서 이름 부여하기
어떻게 하면 배열에서 요소들을 꺼내서 이름을 부여할 수 있을까?
const food = [potato, tomato];const potato = food[0];
const tomato = food[1];위와 같은 방법은 코드도 너무 많아지고 지저분해진다.
우리는 아주 짧은 코드를 이용해서 배열의 첫 번째, 두 번째 요소를 꺼내려고 한다.
const [myFavFood, mySecondFavFood] = food;정말 짧다...
이건 const myFavFood = food[0]과 같다.
아까 구현하던 것에 접목시켜보자.
function App() {
const [counter, modifier] = React.useState();
return (
<div>
<h3>Total clicks: 0</h3>
<button>Click me</button>
</div>
);
}여기서 잠깐!! 헷갈릴 수도 있으니 더 간단하게 해보자.
const x = [1, 2, 3]
const a = x[0]
const b = x[1]
const c = x[2]1
2
3위와 같은 결과가 나온다. 하지만 시간이 오래 걸린다.
const x = [1, 2, 3]
const [a, b, c] = x;이렇게 짧게 할 수 있거든...
설명하자면 x의 배열 안에 값들이 순서대로 a, b, c에 담길 것이다.
여기까지가 바로 state의 첫 번째 부분이고, 다음 글에서는 어떻게 modifier를 이용해서 counter의 값을 바꿔줄지, 그리고 왜 modifier가 필요한지 알아보자.
