[5] state 변경, onClick={함수}

5강 버튼에 기능개발을 해보자 & 리액트 state변경하는 법

 

데이터 올리는 방법 3가지

	3가지 방식이 있다.
	function App() {   let posts = '강남 고기 맛집';   return (       <div className="list">         <h3>{posts}</h3>         <p>2월 17일 발행</p>         <hr />       </div>   ); }
	let [title, titleChange] = useState('데브워니'); //문자, 숫자, array, object 다 가능   console.log('title>>> ', title); //state 데이터   console.log('titleChange>>>> ', titleChange); //state 데이터 변경 함수 <div className="list">         <h3>{title}</h3>         <p>2월 17일 발행</p>         <hr /> </div>
	let [title2, titleChange2] = useState(['남자 코드 추천', '강남 우동 맛집', '피곤하다 집가면 자야지']); //문자, 숫자, array, object 다 가능   console.log('title2>>> ', title2); //state 데이터   console.log('titleChange2>>>> ', titleChange2); //state 데이터 변경 함수        <div className="list">         <h3>{title2[0]} <span onClick={() => { console.log(1); }}>👍</span>0</h3>         <p>2월 17일 발행</p>         <hr />       </div>       <div className="list">         <h3>{title2[1]} <span onClick={() => { 따봉 + 1; }}>👍</span>{따봉}</h3>         <p>2월 17일 발행</p>         <hr />       </div>       <div className="list">         <h3>{title2[1]} <span onClick={() => { 따봉변경(따봉 + 1) }}>👍</span>{따봉}</h3>         <p>2월 17일 발행</p>         <hr />       </div>

 

 

 

 

 

ES Lint는 잘못된 코딩을 잡아주는 것

 

 

es lint 끄는 법

App.js 상단에 
/* eslint-disable */
를 적어라

 

 

 

좋아요 버튼 만들기

 

 

 

자바스크립트	리액트
addEventListener('click', function () {     console.log(2);   });	onClick={( )=>{ }}

둘중에 하나 쓰면 됨.

 

 

		코드
1단계	onClick={ ( )=>{ 실행할 내용 } }	<h3>{title2[0]}  <span onClick={() => { console.log(1); }}>👍</span> 0 </h3>
useState 등록		let [따봉, 따봉변경] = useState(0);//초기값은 0
2단계	숫자 안 올라감 상태 변경 함수를 사용해야함 따봉변경 함수를 써라	<h3>{title2[1]}  <span onClick={() => { 따봉 + 1; }}>👍</span> {따봉} </h3>
	따봉변경('ㄱㄴㄷㄹ');	<h3>{title2[0]}  <span onClick={() => { 따봉변경('ㄱㄴㄷㄹ'); }}>👍</span>{따봉} </h3>
3단계		<h3>{title2[1]}  <span onClick={() => { 따봉변경(따봉 + 1) }}>👍</span>{따봉} </h3>

 

 

 

숙제

버튼을 누르면
첫째 글 제목이 여자코트 추천으로 바껴야함.

 

 

 <button onClick={() => { titleChange2(['여자 코드 추천', '강남 우동 맛집', '피곤하다 집가면 자야지']) }}>버튼</button>

 

 

해설

function App() {
	let [title2, titleChange2] = useState(['남자 코드 추천', '강남 우동 맛집', '피곤하다 집가면 자야지']);//문자, 숫자, array, object 다 가능
 
    function 제목바꾸기() {
      var newArray = title2; // 얕은 복사라 데이터가 안 변한다.
      var newArray = [...title2]; // 깊은 복사를 사용해라
      newArray[0] = '여자코드 추천';
      newArray.sort(); // 제목으로 정렬
      titleChange2(newArray);
    }
  
     return (
     <button onClick={제목바꾸기}>버튼</button>
     );
   
  }