React공부2일차

좋아요 버튼 만들기

 let [따봉, 따봉변경] = useState(0);
<span onClick={ ()=>{ 따봉변경(따봉 + 1) } }>👍</span> { 따봉 }

onClick 사용법

onClick = { 함수() }

state 변경하는 법

• 등호 사용 금지
  ex) {좋아요 = 3} (X)

• state 변경 함수 쓰기 → state변경함수(새로운state)
  ex) let [좋아요, 좋아요변경] = useState(0); onClick={()=>{ 좋아요변경(좋아요+1)};

글 제목을 버튼하나로 수정해보기

 function 제목바꾸기(){
    var newArray = [...글제목]; 
    newArray = '여자코트 추천';
    글제목변경 (newArray);
  }

reference data type
array/object 를 담은 변수에는 화살표(위치정보)만 저장이 됨
변수1 과 변수2의 화살표가 같으면 변수1 == 변수2 는 true 를 반환
array/object 는 원본을 보존하는 것이 좋기 때문에 카피본을 만들어 다룰 것

[...글제목]에서

• ... : 괄호를 벗겨주라는 문법
• [] : 괄호를 다시 씌워주라는 문법
• [... ] : 괄호를 벗겼다가 다시 씌우면 화살표도 달라짐

상세페이지 만들기

component 사용하기
function 만들기
return() 안에 html 담기
<함수명></함수명> 쓰기
component 만들때 주의할 점

다른 function 밖에 만들 것
함수명의 첫글자는 영어대문자