공부시간 : 20:00 ~ 23:00

오늘의 공부
[React] 연습 : 리액트 기초[블로그 프로젝트 만들기] 4강~6강

💜 코딩애플님

• React 기초 4강 : 리액트에서 버튼에 이벤트 리스너 (핸들러) 장착하는 법 [CLICK!]

💡 React 기초2

💜 4강

: 리액트에서 버튼에 이벤트 리스너 (핸들러) 장착하기

• 옛날 JavaScript 는 onClick="클릭될 때 실행할 JS" 의 형태로 사용
• 리액트에서도 거의 동일하게 사용 가능

// 형태

onClick={클릭될 때 실행할 JS}
onClick={클릭될 때 실행할 함수}
onClick={()=>{실행할 내용}}

// 예시
// 따봉 누를 때마다 1 증가시키기

let [따봉,따봉변경] = useState(0);

<h3> <span onClick={()=>{따봉변경(따봉 + 1)}}> 👍 </span> {따봉} </h3>

💜 5강

: state 마음대로 변경하기

1. 기존 state 복사본 만들기
2. 복사본에 수정사항 반영하기
3. 변경함수() 에 집어넣기

// 예시
// 버튼을 누르면 첫번째 글제목을 'A' 로 변경 

let [글제목,글제목변경] = useState(['a','b','c']);

function 제목바꾸기() {
  let newArray = [...글제목]; // 1. 기존 state 복사본 만들기
  newArray[0] = 'A'; // 2. 복사본에 수정사항 반영하기
  글제목변경(newArray); // 3. 변경함수() 에 집어넣기
}

<button onClick={제목바꾸기}>버튼</button>
<h3> {글제목[0]} </h3>

📌 수정된 [데이터]를 만드는 방법

• 원본 state 를 수정해서는 안됨
• deep copy 를 통해 state 의 복사본을 만들어서 수정해야 함
  (특히, state 가 Array, Object 자료형이라면)

💜 6강

: Component 로 HTML 깔끔하게 줄이기

• Component 로 만들어두면 관리가 편해짐
• state 쓸 때 복잡해질 수 있음
• 반복출현하는 HTML 덩어리들이나, 자주 변경되는 HTML UI들, 다른 페이지들을 만들 때도 Component 로 만들면 좋음

🤍 예시

• 일반적인 방식 예시

...(중략)

return (
  <div className="modal"> 
  <h2>제목</h2>
  <p>날짜</p>
  <p>상세내용</p>
  </div>
);

• Component 사용 예시

// Component 만들기

function Modal () {
  return (
    <div className="modal"> 
    <h2>제목</h2>
    <p>날짜</p>
    <p>상세내용</p>
    </div>
  )
}

// Component 사용하기

<Modal />

🤍 Component 만드는 법

1. 함수 만들어서 이름 짓기
2. 축약을 원하는 HTML 내용 작성
3. 위치 지정하여 <함수명 /> 형태로 작성

🤍 Component 유의사항

• 이름은 대문자로 시작
• return () 안에 있는 내용은 태그 하나로 묶어야 함
  : 의미 없는 <div></div> 로 묶고 싶지 않다면 <></> 사용해도 됨