[리액트 블로그 만들기] props와 Input

🍎 코딩애플 리액트 기초 강의를 통해 블로그 만들기 프로젝트를 진행하며 공부한 것들의 기록을 남긴다.

📌 Props

부모 컴포넌트의 state 를 받아오고 싶다면?
부모 컴포넌트의 state 값을 자식 컴포넌트에 전달해주기 -> props 사용

1️⃣ props로 자식(Modal)에게 state 전달하기

• Blog.js
  <자식컴포넌트 props작명={ state명 }/>
  💡 보통 props명은 state명과 동일하게 작성함

  

• Modal.js
  자식컴포넌트에서 Props 파리미터 입력 후 사용한다.
  (부모에게 전달받은 props를 모두 저장하는 일종의 변수)

  

  <h2>{props.title[0]}</h2>
  ➡️ h2에 들어가는 값은 props 중에 title이고, title의 인덱스 0번째 값을 가져온다.
  

• 구현화면

  

2️⃣ 클릭한 글 제목으로 모달창 띄우기

• Blog.js

  • 몇번째 제목 눌렀는지 상태정보를 state에 저장
    state가 0일 때는 0번째 제목, 1일 때는 1번째 제목…
    초기값은 0으로 설정

    let [modalTitle,modalTitleCng] = useState(0)
    

  • Modal 컴포넌트에 props 내려준다.

    modalTitle={modalTitle}
    

• Modal.js
  Title의 인덱스값을 modalTitle로 받아준다.
  

• Blog.js

  • Map 함수의 두번째 파라미터는 반복문 돌 때마다 0,1,2...
    즉 1씩 증가한다. (인덱스)
    제목을 클릭할 때 해당 제목으로 모달창 제목이 바뀌도록 h3의 onClick 이벤트로 modalTitleCng 함수를 통해 modalTitle에 인덱스 값을 넣어준다.
    

    ⭐️ Map 반복문으로 돌린 html에는 key 값이 필요하다. 반복문 돌 때마다 증가하는 정수 -> map 함수 내의 최상위 html 요소인 divi에 key={idx} 달아주기

📌 Input

1️⃣ 리액트에서 사용자의 input 받기

• Blog.js

  • input 값을 저장할 빈 state 만들기

    let [inputData,inputDataCng] = useState('')

  • 입력받은 input값을 onChange 이벤트로 저장하기 (입력이 될 때 이벤트 함수가 실행됨)
    💡 사용자가 입력한 값은 e.target.value 로 받아올 수 있다.
    e.target 은 이벤트가 동작된 곳을 의미 (바닐라 자바스크립트 문법)

    <input type="text" onChange={(e)=>inputDataCng(e.target.value)}/>
    

2️⃣ 글 발행 기능 만들기

⭐️ 핵심 : input에 입력한 글제목을 title State에 추가해준다.

📝 내가 짠 코드

• Publish 라는 styled.div를 만들어서 input 과 button을 집어 넣었다.
  Input에는 앞서 했듯이 onChange 이벤트로 변경된 input 값을 저장해준다.
  button에는 onClick 이벤트로 함수 하나를 호출하고, props로 사용자가 입력한 input 값을 저장한 inputData를 불러와준다.

• onClick으로 호출한 titleAdd 함수

  const titleAdd = ()=>{
    const newTitle=[...title]
    newTitle.unshift(inputData)
    titleCng(newTitle)
  }

➡️ titleAdd 함수는 발행 기능의 핵심인 inputData를 title state에 저장하는 작업을 수행한다.
title을 수정하기 위해 스프레드 연산자로 newTitle 변수에 값을 복사해주고,
newTitle의 첫번째 값으로 inputData를 넣어주기 위해 unshift 메소드를 사용했다.
마지막으로 이렇게 변경된 값을 적용하기 위해 newTitle을 titleCng 함수에 전달한다.

• 구현화면

✏️ 피드백

해결 코드를 보니 OnClick의 함수는 동일하게 작성하였다.👍
하지만 inputData를 props로 내려줄 필요는 없었다!
지워도 잘 작동함. (부모-자식 관계가 아니기 때문에 바로 state에 접근할 수 있음)