💻오늘 배운 내용

기본 개념 확인하기

component = 코드조각

코드 재사용,짧고 간결하게 만들 수 있음

: props란 ?

컴포넌트 안에 데이터 물려주기 위해서 사용함

👩🏼‍💻 useState

🐥useState란?

리액트에서 기본적으로 제공 하는 함수 , 리액트에서 변경 되어야 하는 값은 useState를 사용한다.
(UI를 바꾸기 위해서 사용됨)

기본적인 형태는 아래와 같다.

const [state , setState] = useState("초기값")

state는 변수, setState는 state를 제어 할 수 있는 함수 메서드 이다.

onClick

버튼 클릭시 이벤트 발생

useState를 사용하여 버튼 클릭시 이름이 변경 되도록 구현 하였다.
초기 값을 김팔팔로 설정하여 첫 화면에서는 김팔팔 =>버튼 클릭시 김구구로 바뀐다.

• useState를 사용할 경우 상단에 {useState}가 자동으로 import추가 되지만 안되는 경우도 있으니 주의

onChange

input에 입력할 때 이벤트 발생

const [fruits, setFruits] = useState(" ");

<input
value={fruits} // 변수자리
onChange={function (event) {
setFruits(event.target.value);
}}
/>

input에 onChange 속성을 줄 경우 value와 함께 써야 한다.
onChange는 매게변수로 event를 사용하며 input 입력값을 불러올때는 event.target.value를 사용하면 된다

( id,pw등 입력받을 때 활용 할 수 있다. )

🐥예제 1

❓발생한 이슈/고민

1.alet창에 문자열+JS입력할 때 어떻게 해야 하는지 한참 헤메었다.
2.입력창 초기화 하는 메소드가 따로 있는건지 고민했음

💡해결과정

1.정답은 가까운 곳에 있었다.. 백틱... 잊지말자 백틱
2.useState에 사용된 메서드를 불러와서 빈값을 넣어주면 된다.

🐥예제 2

❓발생한 이슈/고민

      <button
        onClick={function () {
          setNumber(number + 1);
        }}
      >
        +1
      </button>
      

을 작성 했는데 +1 버튼 클릭시 0111 으로 문자열로 추가가 됨

💡해결과정

const [number, setNumber] = useState("0"); 으로 주었기 때문에 발생한 오류였음
초기 값을 숫자 0으로 바꾸니 해결되었다.