댓글 구현 할때의 생각(map, hook)

props, hook, 그리고map를 통해서 아래와 같이 input 창에 값을 넣고 버튼을 누르면 밑에 나오도록 해보겠습니다.

먼저 어떻게 input창과 버튼을 만들어주고 생각 한 것은
1. useState를 써야 한다는 것. 이렇게 생각한 그 이유는 값을 할당한 것에 대한 상태값을 보여줘야하기 때문입니다.

2. 1번에서 생각한 것을 input태그에 onChange를 사용해서 값을 가져와주고 초기값을 선언해줘야 하는 것입니다.

import React, { useState } from "react";

const Comment = () => {
  const [inputValue, setInputValue] =useState('')
  
  return ( 
    <div>
    	<input 
    		type='text'
    		value={inputValue}
			onChange={e=>{setInputValue(e.target.value);
			}}
        />
		<button>버튼<button>
        <div>댓글창<div>
        

처음에 여기까지 고민하고 막혀버려서 유튜브, 구글링을 했었습니당. ㅎ

3. 값을 입력하면 찍히는 것까지 나오는데 버튼을 눌렀을 때마다 댓글이 쌓여야 합니다. 그리고 그 값들을 보관할 장소가 필요한데 이때 state를 배열형태로 사용해주겠습니다. 배열이 보관하는데 용이하기 때문이죠.

import React, { useState } from "react";

const Comment = () => {
  const [inputValue, setInputValue] =useState('')
  const [valueList, setValueList] = useState([])
  
  return ( 
    <div>
    	<input 
    		type='text'
    		value={inputValue}
			onChange={e=>{setInputValue(e.target.value);
			}}
        />
		<button>버튼<button>
        <div>댓글창<div>
    </div>      
  

4. 댓글 넣을 공간을 넣었으니까 이벤트를 줘야한다고 생각했습니다. 버튼을 눌렀을 때 댓글이 달려야 하니까 함수를 만들어주겠습니다.

import React, { useState } from "react";

const Comment = () => {
  const [inputValue, setInputValue] =useState('')
  const [valueList, setValueList] = useState([])
  const click = () => {
  setValueList([...valueList, inputValue])
}
  
  return ( 
    <div>
    	<input 
    		type='text'
    		value={inputValue}
			onChange={e=>{setInputValue(e.target.value);
			}}
        />
		<button onClick({click})>버튼<button>
        <div>댓글창<div>
    </div>     
  

그리고 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아서 반환해줘야 하니까 map을 써줍니다.

import React, { useState } from "react";

const Comment = () => {
  const [inputValue, setInputValue] =useState('')
  const [valueList, setValueList] = useState([])
  const click = () => {
  setValueList([...valueList, inputValue])
}
  
  return ( 
    <div>
    	<input 
    		type='text'
    		value={inputValue}
			onChange={e=>{setInputValue(e.target.value);
			}}
        />
		<button onClick({click})>버튼<button>
        <div>댓글창<div>
       {valueList.map(i=>i)}
    </div> 

이렇게 만들면 댓글창이 완성됩니다. 기존에는 다른 컴포넌트를 만들고 props를 받아와서 썼었는데 그렇게 쓸라고 하니까 너무 길어져서 블로그를 쓰면서 한 컴포넌트로 새로 만들어보았습니다. 처음할때는 막연하게 어려워서 어떻게 시작해야할지 모르겠다면 지금은 어떻게 흘러가는 흐름이 좀 보이는 느낌입니다. 천천히 고민해보고 구조를 파악하는데 더 신경을 써보겠습니당.