[TIL] 20230612 - 명령프롬프트 드라이브 이동 명령어! React useState Hook 사용법(onClick/onChange)

명령 프롬프트에서 드라이브 변경을 어덯게 하는지 몰라서 이렇게 저렇게 쳐봣는데 ㅋㅋㅋㅋ

엄청나게 간단했던 ㅎㅎㅎㅎㅎㅎ

드라이브안에서 폴더간 이동은 cd로 가능하지만 드라이브간 이동은 불가하다!

드라이브간 이동은 '드라이브 이름:' 이렇게만 적어주면 바로 이동된다 ㅎㅎ

 

새로시작한 리액트 폴더를 만들기 위함이었기 때문에

리액트 폴더도 만들어보자

 

명령 프롬프트에서

ls  => 현재 내가 위치하고 있는 곳이 어디인지 확인

cd 폴더이름  => 리액트 프로젝트를 생성하고 싶은 폴더로 이동

yarn create react-app week-1  => week-1 폴더명을 가진 프로젝트 생성!

알아서 엄청 막 설치가 된당 ㅎ 해당 폴더로 들어가보면 이렇게 폴더 구조가 알아서 만들어져 있다!

 

명령 프롬프트에서 아래명령어로 프로젝트를 구동시켜보자/ vs code 터미널에서 실행해도 된다.

그럼 이렇게 멋잇는 화면이 나타난당 ㅋㅋㅋ

 

 

 

 React useState Hook

 

hook은 기능을 이야기한다.

useState Hook 이란 어떠한 기능을 하는 함수라는 뜻

 

useState Hook사용법!

const [value, setValue] = useStat(초기값)

 

onClick={}

 

import React, { useState } from 'react';

function App() {

    const [name, setName] = useState('홍길동');

    function changeName() {

        setName('춘향이');

    }

    return (

        <>

            <div style={{ padding: '30px' }}>

                {name}

                <br />

                <button onClick={changeName}>클릭 버튼</button>

            </div>

        </>

    );

}

export default App;

 

클릭 전 / 클릭 후

useState를 이용해서 기본값을 주고

button 이 클릭될 시에 setName에 새로운 값을 넣어 변경해준다!

 

 

onChange={}

 

import React, { useState } from 'react';

function App() {

    const [fruit, setFruit] = useState('');

    return (

        <>

            <div style={{ padding: '30px' }}>

                과일:{' '}

                <input

                    value={fruit}

                    onChange={function (e) {

                        setFruit(e.target.value);

                    }}

                />

                <br />

                {fruit}

            </div>

        </>

    );

}

export default App;

value => input 안에 뭐가 들어있냐?

onCange => input 안에서 어떠한 타이핑이 일어날때!

 

onCange에서는 함수 매개변수자리에 꼭 이벤트가 딸려와야한다! 꼭꼭!!

매개변수(e)에는 뭐가 들어오는지 찍어보면

이런이런 정보들이 들어있는데 우리는 input에 value를 가져와서 쓸거니까

이게 중요!!

e.target.value

setFruit('e.target.value') 로 input에 들어오는 값으로 바꿔줄 수 있다.