#3. State

State

const root = document.getElementById("root");
let counter = 0;

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

ReactDOM.render(<Container />, root);

content를 작성하던 위치에 중괄호를 열고 변수를 담아줄 수 있다

변경 사항을 다시 HTML 문서에 반영하고 싶다면 전체를 재렌더링해 주면 된다

 

function App() {
    const data = React.useState();
    const counter = data[0];
    const modifier = data[1];
    return (
        <div>
            <h3>Total clicks: {counter}</h3>
            <button>Click me</button>
        </div>
    );
}

위와 같은 방식으로 useState를 이용하여 data의 값을 출력할 수 있다

 

const food = ["tomato", "potato"];
const [firstFood, secondFood] = food;
// firstFood = "tomato"
// secondFood = "potato"

그런데 배열에 인덱스를 활용하지 않아도 위처럼 이름을 할당해 줄 수 있다

 

따라서 위 코드를 아래와 같이 변경해 줄 수 있다

function App() {
    const [counter, modifier] = React.useState();
    return (
        <div>
            <h3>Total clicks: {counter}</h3>
            <button>Click me</button>
        </div>
    );
}

 

useState를 사용하면 배열을 반환해주는데, 배열의 0번째는 변수, 배열의 1번째는 해당 변수의 값을 변경해주는 함수를 의미한다

따라서 modifier라는 이름의 함수를 사용하면, counter 변수의 값이 바뀌면서 동시에 리렌더링해 준다

(보통 [counter, SetCounter] 등으로 modifier 함수는 변수의 이름 앞에 Set을 붙여서 이름을 할당한다)

function App() {
    const [counter, modifier] = React.useState();
    const onClick = () => {
        modifier(counter + 1);
    };
    return (
        <div>
            <h3>Total clicks: {counter}</h3>
            <button onClick={onClick}>Click me</button>
        </div>
    );
}

위와 같이 작성하게 되면, 버튼을 클릭했을 때 onClick 함수가 호출되고, modifier 함수가 호출되면서 counter의 값이 counter + 1으로 변경되고, 리렌더링 되어 화면에서 볼 수 있게 된다

* App 컴포넌트를 리렌더링 하는 것이므로, 함수 내에 명령어를 적어두었다면 해당 명령어도 리렌더링 될 때마다 실행된다

 

State를 바꾸는 데에는 여러 방법이 있는데

setCounter(counter + 1);
setCounter((current) => current + 1);

직접 counter 변수를 들고 와서 1을 더해줄 수도 있고, 현재 변수의 값을 가져와 여기에 1을 더해줄 수도 있다

두번재 방법이 더 바른 방법이다

 

* 기존 HTML을 이용해서 input과 label을 연결시켜 줄 땐 아래와 같이 코드를 작성한다

<label for="minutes">Minutes</label>
<input id="minutes" placeholder="Minutes" type="number" />

 

그러나 class나 for같은 단어들은 javascript 상에서 선점된 단어이므로

class => className
for => htmlFor

위와 같이 바꿔서 써주어야 한다

* script tag에서 뒤에 붙는 production은 배포 모드, development는 개발 모드(위와 같은 경우 경고하는 검증 코드 포함)를 의미한다

 

Input and States

function App() {
    const [minutes, setMinutes] = React.useState();
    const onChange = (event) => {
        setMinutes(event.target.value);
    }
    return (
        <div>
            <h1 className="hi">Super Converter</h1>
            <label htmlFor="minutes">Minutes</label>
            <input
                value={minutes}
                id="minutes"
                placeholder="Minutes"
                type="number"
                onChange={onChange}
            />
        </div>
    );
}

input에 뭔가 입력하면 onChange함수가 호출되고, event.target을 통해 input의 value에 접근하여 해당 값을 minutes에 넘겨준다

 

+

return 중간에 중괄호를 사용하면 그 부분은 자바스크립트 코드를 작성할 수 있다

return (
    <div>
        <span>test</span>
        {index === "0" ? <MinutesToHours /> : null}
        {index === "1" ? <KmToMiled /> : null}
    </div>
)

index가 0이라면 MinutesToHours라는 컴포넌트를 띄우고,

index가 1이라면 KmToMiled 컴포넌트를 띄우게 된다

(return 외 다른 부분은 생략한 상태)