use State 간단설명 onClick 버튼 눌러 추천 수 올리기 + 단어 바꾸기 React 기초

👉 useState()는 값을 넣어두고 참조하기 위한 변수(state 변수), 값을 바꿔주기 위한 함수를 반환합니다.

 

---

onClick은 말그대로 클릭누르면 출력된다 이거다.

사용할때 카멜케이스 지켜서 단어 처음마다 on Click 대문자 쓰는거 잊지말자

초반에 오류난게 뭔지 모르다가 다른곳에서 헤매고 있었다

 

이번 포스팅 강의는 코딩애플 4강 : 버튼에 지리는 기능 만들기이며 숙제도 같이 준비했다

https://www.youtube.com/watch?v=GOiCobCh2Ig 

 

사진과 같이 변경 버튼을 누르면 여자코트추천으로,

맛집 추천 버튼을 누를때마다 1개씩 증가

 

 

function App() {
  //4강 숙제, 버튼을 누르면 첫 글이 '여자코트 추천'으로 바뀌는 기능 만들기
  let [글제목0, 글제목변경0] = useState('남자코트 추천');
  let [글제목1, 글제목변경1] = useState('강남 우동맛집');
  let [글제목2, 글제목변경2] = useState('파이썬독학');
  let [날짜] = useState('2월 17일 발행');
  let [추천, 추천변경] = useState(0);
  let [글추가, 글추가변경] = useState('여자코트추천');

  return (
    <div className="App">

      <h1>{글제목0}
        <button onClick={() => { 글제목변경0(글추가) }}> 변경 </button>
      </h1>
      <h1>{날짜}</h1>
      <h1>{글제목1} <span onClick={() => { 추천변경(추천 + 1) }}>👍</span>{추천}</h1>
      <h1>{날짜}</h1>
      <h1>{글제목2}</h1>
      <h1>{날짜}</h1>
    </div>
  );
}

위에는 state를 하나의 배열로 만든게아니라 3개로 나눴다 추천,맛집,독학

 

 useState 함수를 할당할때는 예를들자면 let [ day, setDay ] = 이렇게 변경함수에는 set~을 자주 쓴다

 

 

 

onClick과 State를 사용한 변경

('남자코트 추천'을 '여자코트 추천'으로 바꾸기)

        <button onClick={() => { 글제목변경0(글추가) }}> 변경 </button>

'여자코트 추천'으로 변경하는 코드인데

1. onClick={ ( ) => { } } 화살표 함수 작성 {}가 하나 더 있는 이유는 <button>요소에 접근하기 때문

2. '남자코트 추천'의 변경state인 글제목변경0(글추가함수)    바꿀state(바꿀값)을 작성해준다  

 

onClick과 State를 사용하여 추천 올리기

      <h1>{글제목1} <span onClick={() => { 추천변경(추천 + 1) }}>👍</span>{추천}</h1>

1. 글변경 코드 와 같이 onClick과 화살표함수 작성

2. 추천변경함수(추천 + 1)을 하여 누를때마다 1이 늘어나게 해준다.

 

 

 

코드만 보니 확실히 쉬워이지만 직접 작성해보는게 큰 도움이 된다.