React 1 useState()

React.useState()

React.useState()

 - 값을 함수를 이용해 원하는 값으로 변경할 때 사용한다. (참고 자료)

 

const [초기 값 명, 함수 명] = React.useState(초기 값);

 

예) 숫자 카운터 예

function App() {
    const [counter, setCounter] = React.useState(0);
    // 직접 값을 설정하기
    const onClick = () => setCounter(counter+1);

    /*함수를 호출하기
    const onClick = () => setCounter(count => count+1);*/

    return (
        <div>
            <h1>클릭 수: {counter}</h1> <!--counter에 담긴 수가 불러와짐-->
            <button onClick={onClick}>클릭</button>
        </div>
    );
}

 

예) 메뉴 체인지 예

function App() {
    const [index, setIndex] = React.useState("0");
    const onSelect = (event) => {
        setIndex(event.target.value);
    };

    return (
        <div>
            <h1 className="h1">Super converter</h1>
            <select onChange={onSelect}>
                <option value="0">시간 & 분</option>
                <option value="1">Km & M</option>
            </select>
            <hr />
            {index === "0" ? <MinutesToHours /> : <KmToM />}<!-- 삼항연산자를 활용-->
            <!-- <MinutesToHours /> 와 <KmToM /> 컴퍼넌트로 위에 함수를 불러오는 것 -->
        </div>
    );
}

 

 추가!! JSX는 html과 다르게 {중괄호}를 이용하면 JS를 활용할 수 있다. 위에 주석으로 표시함.

 

---

공부 내용 작성 코드 github 주소

공부한 곳! - 노마드 코더 'ReactJS로 영화 웹 서비스 만들기'