[React] 2023.06.17

변수 함수를 굳이 밖에 안빼도 된다.

state를 자식에 만들면 부모 → 자식 전송할 필요가 없다.

근데 state가 Modal, App에서 필요하면 가장 최상위 컴포넌트에 보관하는 게 좋음

App에 보관

<input>태그

<input></input>

<input/>

<input>에 뭔가 입력시 코드 실행하고 싶으면

onChange / onInput

onMouserOver → 마우스를 올릴 때 이 코드 실행

onScroll → 스크롤 조작할 때 실행

input 태그에 입력한 값 가져오는 법

<input onChange={(e) => {console.log(e.target)}}></input>

e를 넣어주면 이벤트객체라고 불리는거다. input 태그에서 발생하는 이벤트과 관련된 기능(변수)라고 보면 된다.

e.target 이 이벤트가 발생하는 곳

e.target.value 이벤트가 입력한 값

input에 입력한 값 저장하려면

아래와 같이 입력하면 된다. state로 저장해서 사용 가능

let [입력값, 입력값변경] = useState('');
      <input onChange={(e) => { 입력값변경(e.target.value)}}></input>

<select></select>

<textarea></textarea>

기억해야 할 것

state 만드는 법

props 전송하는 법

컴포넌트 만드는 법

UI 만드는 step

클릭이벤트는 상위 html로 퍼짐(이벤트 버블링)

span을 누르면 3개가 클릭됨 h4, div, span 이렇게 3개가 동작

글제목.map(function (a, i) {
          return (
            <div className="list" key={i}>
              <h4 onClick={() => {setModel(true); setTitle(i) }}>{글제목[i]}
                <span onClick={() => let copy = [...따봉];
									copy[i] = copy[i] + 1;
                  따봉변경(copy)
                }}>👍</span> {따봉[i]}
              </h4>
              <p>2월 17일 발행</p>
            </div>
          )
        })
      }

이벤트버블링을 막기 위해서는 e.stopPropagation()

글제목.map(function (a, i) {
          return (
            <div className="list" key={i}>
              <h4 onClick={(e) => {e.stopPropagation()setModel(true); setTitle(i) }}>{글제목[i]}
                <span onClick={() => let copy = [...따봉];
									copy[i] = copy[i] + 1;
                  따봉변경(copy)
                }}>👍</span> {따봉[i]}
              </h4>
              <p>2월 17일 발행</p>
            </div>
          )
        })
      }

splice(0, 1) → 0번째 항목 삭제 / 1, 1 / 2, 1 / 첫번째 , 두번째

첫번째 리스트 삭제하면 splice(0, 1);

두번째 리스트 삭제하면 splice(1, 1);

세번째 리스트 삭제하면 splice(1, 1);

→ splice(???, 1); ???에 변수 입력(i)

→ splice(i, 1);

<button onClick={() => {
                let copy = [...글제목];
                copy.splice(0, 1);
                글제목변경(copy);
              }}>삭제</button>
            </div>
          )
        })
      }