node.js/react

React 댓글기능(작성중)

aaa222 2022. 4. 25. 13:51
728x90

React 를 이용한 댓글 작성을 위한 목차

  1. 컴포넌트 구조
    1. children
  2. CommenForm 컴포넌트에 Input 박스와 button 버튼추가
  3. App 컴포넌트에 가라데이터 주기
  4. App컴포넌트의 state값을 CommentList 에서 props받기
  5. props받은 데이터를 브라우저에 랜더시키기
  6. 등록 버튼을 눌렀을때 내용을 가져올수있게하기

Comment.css

더보기
*{margin:0; padding:0;}
body{
font-family: 'Noto Sans KR', sans-serif;
font-weight:300;
}
ul,li{
list-style:none;
}

 

.comment{
display:flex;
flex-direction: column;
flex-wrap: nowrap;
padding:30px;
width:600px;
margin:0 auto;
 
}

 

.comment > li{ margin-top:20px; }
.comment > li:nth-child(1){ margin:0px;}

 

.comment-row{
display:flex;
justify-content: space-between;
flex-direction: row;
}

 

.comment-row{
margin-top:20px;
width:100%;
}

 

.comment-row > li:nth-child(2){
flex-shrink: 0;
flex-grow: 1;
padding-left:25px;
z-index:1;
width:100%;
}

 

.comment-row > li:nth-child(2){
width:85px;
}

 

.comment-form > form{
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}

 

.comment-form > form > h4{
width:100%;
margin:14px 0 14px 0;
}

 

.comment-content{
word-break:break-all;
padding-right:25px;
}

 

.ps_box{
display: block;
position: relative;
width: 80%;
height: 51px;
border: solid 1px #dadada;
padding: 10px 14px 10px 14px;
background: #fff;
box-sizing: border-box;
}

 

.ps_box > input{
outline:none;
}

 

.int{
display: block;
position: relative;
width: 100%;
height: 29px;
padding-right: 25px;
line-height: 29px;
border: none;
background: #fff;
font-size: 15px;
box-sizing: border-box;
z-index: 10;
}

 

.btn{
width:18%;
padding: 18px 0 16px;
text-align: center;
box-sizing: border-box;
text-decoration: none;
border:none;
background:#333;
color:#fff;
font-size:14px;
}

 

.comment-delete-btn{
display:inline-block;
margin-left:7px;
cursor: pointer;
}

 

.comment-update-input{
border:none;
border-bottom: 1px solid #333;
font-size:16px;
color:#666;
outline: none;
}

Comment.jsx

import React,{Component} from 'react'
import CommentForm from './CommentForm'
import CommentList from './CommentList'
import '../../assets/comment.css'


class Comment extends Component{
    render(){
        return(
            <div>
            </div>
        )
    }
}

export default Comment

CommentForm.jsx

class CommentForm extends Component{
    render(){
        return(
            <div>

            </div>
export default CommentForm

CommentList.jsx

import React,{Component} from 'react'

class CommentList extends Component{
    render(){  
        return(
            <div>
            </div>
        )
    }
}

export default CommentList

App.jsx

import React, { Component } from 'react'
import Comment from './components/comment/Comment'
import CommentForm from './components/comment/CommentForm'
import CommentList from './components/comment/CommentList'


class App extends Component{
    render(){
        return(
            <>
                <Comment> 
                    <CommentForm /> 
                    <CommentList /> 
                </Comment> 
            </>
        )
    }
}


export default App;

1. 컴포넌트의 구조

 

App 이라는 부모 컴포넌트에 Comment컴포넌트를 만들어 그안에 CommentForm과 CommentList컴포넌트를 마들었다.
Form컴포넌트는 글을 작성하여 버튼을 눌렀을때이벤트를 발생하는 컴포넌트이고
List 컴포넌트는 Form컴포넌트의 버튼을 눌렀을때의 내용을 List 컴포넌트에 랜더시키는 구조로 되어있다.

부모컴포넌트에 자식 컴포넌트를 구조에맞게 컴포넌트를 연결시켜줘야한다.

 

App.jsx

import Comment from './components/comment/Comment'
import CommentForm from './components/comment/CommentForm'
import CommentList from './components/comment/CommentList'
<>
    <Comment> 
        <CommentForm /> 
        <CommentList /> 
    </Comment> 
</>

App컴포넌트에 Comment컴포넌트를 불러와 Comment컴포넌트에 각각위에Form컴포넌트와 List 컴포넌트를 작성해주었다.

 

Comment 컴포넌트 구조

 

Comment 컴포넌트에

class Comment extends Component{
    render(){
        return(
            <ul className="comment">
              {this.props.children} 
            </ul>
        )
    }
}

 

ul 태그에 this.props.children을 작성해줬다.

1-1. children

children 은 App컴포넌트에 <Comment/>를 작성해 Comment 컴포넌트를 불러오는 방식이엇지만

<>
    <Comment> 
        <CommentForm /> 
        <CommentList /> 
    </Comment> 
</>

<Comment> Hi.children </Comment> Comment 컴포넌트 태그와 태그사이에 컴포넌트를 불러오거나 하위 태크를 작성할수있게 해준다.

 

 

2.CommenForm 컴포넌트에 Input 박스와 button 버튼추가

 

CommentForm.jsx

class CommentForm extends Component{
    render(){
        return(
  	<li className="comment-form">
        <form>
            <span className="ps_box">
                <input 
                    type="text" 
                    placeholder="댓글을 입력해 주세요."
                    className="int"
                    />
            </span>
            <input type="submit" className="btn" value="등록" />
        </form>
    </li>
export default CommentForm

 

commentForm 컴포넌트에 input박스와 input butten 을 추가햇다.

CommentList.jsx

class CommentList extends React.Component {
    render() {
        return(
        <li>
            댓글
        </li>
        )
    }
}

3.App 컴포넌트에 가라데이터 주기

App.jsx

class App extends React.Component {
    state = {
        value : '123',
        contentlist : [
            {userid:'무야호',content:'ㅎㅎ..',date:"2022-04-23"},
            {userid:'꾸엑',content:'끼에에엥',date:"2022-04-23"},
            {userid:'우웩',content:'우욱',date:"2022-04-23"}
        ]
    }
    render() {
        return(
            <Comment>
                <CommentForm/>
                <CommentList vlaue={this.state.contentlist}/>
            </Comment>
        )
    }
}

App 컴포넌트에 가라데이터 를 주고 상태값 value에 '' 를 content 값에 가라데이터를 주었고  CommentList 에 props하기위해 {this.state.contentlist}를 작성했다.

 

state 에  value값을 123과 content 값이 잘 받아졌는지 확인해본다

App컴포넌트에 작성한 상태값은 작성한 그대로 브라우저에 잘 나와있고 이 값이 CommentList 컴포넌트에

<CommentList vlaue={this.state.content}/> 를 작성 하여 CommentList컴포넌트에 전달이 되었는지 확인해보자

state값을 잘 받아왔으니 CommentList 부분에 content값을 브라우저에 랜더시킬수있게 해준다.

4.props받은 데이터를 브라우저에 랜더시키기

CommentList.jsx

class CommentList extends React.Component {
    items = () =>  this.props.contentlist.map((v,k)=>{
    return (
            <ul className="comment-row" key={k}>
                <li className="comment-id">{v.userid}</li>
                <li className="comment-content">{v.content}</li>
                <li className="comment-date">{v.date}</li>
            </ul>
    )
})
    render() {
        return(
        <li>
            댓글
        </li>
        )
    }
}
{userid:'우웩',content:'우욱',date:"2022-04-23"}

CommentList 컴포넌트에 items 함수에 App 컴포넌트에 state 값을 props 해서 가져온 값들을

각각 <li>에 담아 userid 와 content와 date를 랜더시키기위해 함수에 작성했다.

 

브라우저의 CommentList 의 props의 value를 보면 [ {…}, {…}, {…} ] 배열안에 값이 담겨져있다 

 

contentlist : [
            {userid:'무야호',content:'ㅎㅎ..',date:"2022-04-23"},
            {userid:'꾸엑',content:'끼에에엥',date:"2022-04-23"},
            {userid:'우웩',content:'우욱',date:"2022-04-23"}
        ]

 

즉 props로 가져온 state에 content의값을 map()을 <ul className="comment-row" key={k}> [ {…}, {…}, {…} ]모든 배열의 값에 함수를 이용해 v는 각각의 값이고 k는 배열의 위치를 나타나게 되어 

 

App 컴포넌트에서 작성한 state(상태)에 contentlist 값을 commentList 컴포넌트로 props 로 가져와서 map를 통해 userid와 content 와 date값을 각각 가져왔다.

 

가져온 값을 이제 랜더시켜야하는데

        return(
        <li>
            {this.items()}
        </li>
        )
    }
}

댓글이라 써있던 곳에 {this,items()} 를 작성해준다 map을 통해  props한 값을 가져와 item의 값을 ComentList에<li>태그에 넣어

App.jsx

<CommentList vlaue={this.state.contentlist}/>

CommentList 에 props하기위해 {this.state.contentlist}를 작성했었다 이 값을

<CommentList contentlist={contentlist}/>

으로 바꿧다.

 

contentlist값을 map를 이용하여 만든 items를 CommentList 컴포넌트에 <li>태그에 {this,items()}를 작성해주고

 

App 컴포넌트에 최종적으로 contentlist 값을 랜더시키기위해

const {contentlist} = this.state 

state값을 {contentlist} 로 담아주어 

랜더영역에 contentlist={contentlist}를 작성해주었다

 

App.jsx

 

class App extends React.Component {
        state = {
            value : '123',
            contentlist : [
                {userid:'무야호',content:'ㅎㅎ..',date:"2022-04-23"},
                {userid:'꾸엑',content:'끼에에엥',date:"2022-04-23"},
                {userid:'우웩',content:'우욱',date:"2022-04-23"}
            ]
        }
        render() {
            const {contentlist} = this.state
            return(
                <Comment>
                    <CommentForm/>
                    <CommentList 
                        contentlist={contentlist}
                    />
                </Comment>
            )
        }
    }

 

6.등록 버튼을 눌렀을때 내용을 가져올수있게하기

CommentForm.jsx

<li className ="comment-form">
    <form onSubmit={this.handleSubmit}>
        <span className="ps_box">
            <input 
            type="text" 
            className="int" 
            placeholder="댓글을 입력해주세요"
            />
        </span>
        <input 
            type ="submit"
            className="btn"
            value="등록"
        />
    </form>
</li>

<Form>태그에 onSubmit 이벤트를 추가하고 handleSubmit 이라는 함수를 만들어준다.

 

CommentForm 컴포넌트내부에 handleSubmit 함수 이벤트를 추가한다.

handleSubmit = e => {
    e.preventDefault()
}

handleSubmit 이라는함수에 e라는 매개변수를 주고 매개변수에 preventDefault()를 이용해 submit버튼을 누를때 form태그 안에  input박스 내용을 가져올수있게했다,

728x90