React - 쇼핑몰 웹사이트 (1) - useState, Component

잠깐 저장하고 싶은 변수는 그냥 변수에 저장

또한 state에 작성할 수 있음 

 

let post = '강남 우동 맛집'

let [글제목,b] = useState('남자 코트 추천', 함수)

 

state와 변수의 차이 ? 

글제목이라는 '남자 코트 추천' 이 변경이 되는 순간 state가 되는 html 은 재렌더링이 자동으로 된다 

변동시 자동으로 html에 반영되게 만들고 싶을 때 state를 써야함 !! 

더 쉽게 ? 자주 변경 될 것 같은 html은 state로 만들어 놓으면 됨 

 

 

const [title1, setTitle1] = useState('남자 코트 추천')
const [title2, setTitle2] = useState('강남 우동 맛집')
const [title3, setTitle3] = useState('파이썬 독학')

let [글제목, b] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학'])

//글제목[0], 글제목[1], 글제목[2] 이렇게 사용

 

/*eslint-disable*/ 

warning message삭제 

 

onClick = {함수명} 

 

state를 변경하는 법

: 등호로 변경 금지 ! ex ) <span onClick={ ()=>{따봉=따봉+1}}>

: state변경함수를 써서 작성하기 ex) <span onClick={() => {따봉변경(따봉+1)}}>

 

let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학'])

//ex1. 이런식으로 하면 확장성이 없음
return (
    <button onClick={()=> {
        글제목변경(['여자코트추천', '강남 우동 맛집', '파이썬 독학'])
      }}>
  )
 
 
 //ex2. 일부분만 변경하는 코드 
 
<button onClick={()=> {
        글제목[0] = '여자 코트 추천';
        글제목변경([...글제목])
}}> 

//ex3. array/object를 다룰때에는 원본 데이터는 보존하는 것이 좋음 
<button onClick={()=> {
        let copy = [...글제목]
        copy[0] = '여자코트 추천'
        글제목변경(글제목)
}}>

 

state 변경함수의 특징

1. 기존state == 신규 state인 경우는 변경해주지 않음 

2. array/object의 특징 array/object 담은 변수에는 화살표만 저장되어있음

 

글제목[0] = '여자코트추천'

글제목변경(글제목)

으로하면 변경되지 않는 경우는 화살표는 그대로이고 기존 state== 신규 state는 동일하다고 판단함

 

변수1&변수2의 화살표가 같으면 변수1==변수2 비교해도 true로 나옴 

 

... 문법 ? 

괄호를 벗겨주세요 

[...글제목] 을 해석하면 1. 괄호를 벗겨주세요 2. 괄호를 씌워주세요 

=  결론은 새로운 화살표를 만들어주세요 

새로운 화살표로 되기 때문에 글이 수정이 됨 ! 

 

 ! 결론 : state가 array/object이면 독립적인 copy본을 만들어서 수정해야함 으로 이해하기 

Component :많은 div들을 한 단어로 줄이고 싶을 때

1.  function 바깥에 & 영어 대문자로 시작하는 단어 

2. return () 안에 html넣어주기

3. <함수명> <함수명/>

 

const Modal = () =>{

 

}

function Modal(){

 

}

 

어떤걸 컴포넌트로 만들면 좋은지 ?

1. 반복적인 html 축약할 때

2. 큰 페이지 하나

3. 자주 변경되는 것들