댓글창 만들기(리액트)

 <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

이 세 개의 스크립트 태그를 사용하면
React와 Babel을 사용하여 개발환경을 설정할 수 있습니다. 
React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리이며,
Babel은 JavaScript 코드를 브라우저에서 이해할 수 있는 형태로 변환해주는 도구입니다.

 

 

  class CommentItem extends React.Component{
            constructor(props){
                super(props)
                // props = {userid : "작성자",content : "내용", date : "날짜"}
            }
            render(){
                return(
                    <ul>
                        <li>{this.props.userid} </li>
                        <li>{this.props.content} </li>
                        <li> {this.props.date}</li>
                        </ul>
                )
            }
        }

---

 class CommentForm extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    // form에서 보낼 값
                    // input에 입력값을 상태값으로 넣어줄거임
                    value:""
                }
                this.changeHandler = this.changeHandler.bind(this)
                this.submitHandler = this.submitHandler.bind(this)

            }

this.state 객체 초기화
changeHandler와 submitHandler 함수는 bind 메서드를 사용하여 이 클래스의 인스턴스와 바인딩
이렇게 함으로써 메서드 내부에서 this 올바르게 참조가능

 

 

 // 입력값을 처리할 함수
            changeHandler(e){
                // input의 value를 구조분해 할당
                const {value} = e.target
                this.setState({
                    ...this.state,
                    value
                })
            }

changeHandler 라는 함수를 정의 이 함수는 입력값을 처리하는 함수

함수는 이벤트 객체 'e'를 인자로 받는다.
e.target은 이벤트가 발생한 요소 즉 입력 필드를 가리킨다.
구조 분해 할당을 사용하여 e.target의 value 속성을 추출 이는 입력 필드의 현재 값

그런 다음 this.setState() 를 호출하여 컴포넌트의 상태를 업데이트 한다.
...을 붙여서 this state앞에 붙여주는데 이전의 상태 수정하지 않고 새로운 상태를 생성하기 위함
그다음 value 속성을 업데이트된 값으로 설정

이렇게 하면 입력 필드의 값을 컴포넌트의 상태로 저장가능

 

 

  // 입력을 했으면 입력을 처리할 함수
            submitHandler(e){
                // 새로고침 이벤트 막고
                e.preventDefault();
                // 작성한 댓글을 추가해줄 곳
                this.props.create(this.state.value);
                //
                // 다시 상태값 초기화
                this.setState({value : ""})
            }

this.setState({value: ""})
코드는
value
상태 변수를 빈 문자열로 설정하여 이전 입력 값을 지우고 초기화합니다. 이렇게 함으로써 새로운 입력을 받을 준비가 되고, 사용자가 다시 입력을 시작할 수 있게 됩니다.

 

 

render(){
                return(
                    <li>
                        <form onSubmit={this.submitHandler}>
                            <h4>댓글 작성 <span>: {this.props.length}</span></h4>
                            <span>
                                <input type="text" onChange={this.changeHandler} value={this.state.value}/>
                            </span>
                            <input type="submit" value="등록"/>
                         </form>
                    </li>
                )
            }

 

 

class CommentList extends React.Component{
            constructor(props){
                super(props)
            }

            loop(value,index){
                // key는 리액트가 요소를 식별할때 성능 좋아짐
                return <CommentItem key={index} userid={value.userid} content={value.content} date={value.date} />
            }

            render(){
                return <li>{this.props.items.map(this.loop)}</li>
            }
        }

 render(){
                return (
                    <ul>
                        <CommentForm create={this.create} length={this.state.comment.length}/>
                      <CommentList items={this.state.comment}/>
                    </ul>
                )
            }

1.
loop 메서드 :this.props.items 배열의 각 요소에 대해 CommentItem 컴포넌트를 생성하고 반환한다.
2.
render 메서드 this.props.items 배열을 map 함수를 사용하여 loop 메서드를 호출하여 CommentItem 컴포넌트들을 생성
그리고 생성된 컴포넌트들을 <li> 태그 안에 반환

 

class Comment extends React.Component{
            constructor(props){
                super(props)
                this.state = {
                    comment : [
                        // 추가 새글
                        {
                            userid:"ed",
                            content:"1",
                            date:"20230629"
                        },
                        {
                            userid:"ed",
                            content:"2",
                            date:"20230629"
                        }
                    ]
                }
                this.create = this.create.bind(this);
            }
            // 새로운 댓글 작성 함수
            create(content){
                
                this.setState({comment : [{userid : "ed", content, date : "20230629"}, ...this.state.comment]})
            }

            render(){
                return (
                    <ul>
                        <CommentForm create={this.create} length={this.state.comment.length}/>
                      <CommentList items={this.state.comment}/>
                    </ul>
                )
            }
        }

this.create = this.create.bind(this);
여기에서 this는 constructor 함수 안에 있는데 
일반적인 함수 호출에서는 this는 전역 객체인 window를 가리키지만(그 함수는 해당 컴포넌트의 인스턴스에 바인딩 x)

그래서 this.create = this.create.bind(this); 구문은 
create 메서드를 생성하고 현재 컴포넌트 인스턴스에 바인딩할수 있다.
이렇게 함으로써 this.create는 항상 현재 컴포넌트 인스턴스를 참조한다.

this.state.comment.length는 현재 컴포넌트의 상태(state)인 comment 배열의 길이 참조

 

        // 페이지 컴포넌트
        class App extends React.Component{
            render(){
                return(
                    <div>
                        {/* 댓글 레이아웃 컴포넌트 가져옴*/}
                        <Comment/>
                    </div>
                )
            }
        }

        // 루트 설정
        const root = ReactDOM.createRoot(document.querySelector('#root'));
        root.render(<App />);