댓글2. 기능 구현 (R)

목차

1. App컴포넌트로 state 끌어올리기
2. state의 list, CommnetList 컴포넌트에 props로 전달
3. 리스트 렌더하기
4. componentDidMount() 메서드로 CSR
5. 누적 작성 코드

 

 

 

 

list에서 state를 선언하면 데이터를 뿌리는 것은 쉽다.

하지만 컨텐츠의 내용은 사용자가 Form의 인풋 내용을 서브밋 하는 내용이 들어가야 한다.

 

따라서 Form의 내용을 List로 받아야 함

props는 부모 컴포넌트에서 자식으로 전달할 수 있음

 

따라서 상태 끌어올리기 스킬을 통해서

상태를 Comment로 끌어올려서 Comment에서 자식인 Form과 List로 전달해야 함

 

하지만 현재 코드에서는 Comment 컴포넌트에

props.children을 입력했으므로

앱 컴포넌트에 state를 입력할 것이다

 

1.  App 컴포넌트로 상태 끌어올리기

state = {
    value: 'hello',
    list: [
        {userid:'web7722',content:'하이',date:'2022-04-26'}
    ]
}

 

2. state의 list, props로 commentList 컴포넌트에 전달

• 앱 컴포넌트에 있는 state의 list 속성은 commentList 컴포넌트가 사용할 예정이므로 commentList 컴포넌트에 props로 전달

 

<CommentList list = {this.state.list}/>

 

확인해보자!

• App 컴포넌트에 state가 잘 설정?
• Comment 컴포넌트에 props 잘 전달?

 

 

 

 

3. 리스트 렌더하기

3-1. commentList 컴포넌트 안에 items라는 변수 선언 후 props 값 가져오기

• 맵을 통해서 객체의 내용을 v로, 인덱스를 k로 받음

 

items = () => this.props.list.map((v,k)=>{
    return(
        <ul className ="comment-row">
            <li className="comment-id">아이디</li>
            <li className="comment-content">제목</li>
            <li className="comment-date">날짜</li>
        </ul>
    )
})

 

 

3-2. 렌더의 리턴 부분 변경하기(배열을 출력)

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

 

3-3 작성 후 리스트(배열) 잘 렌더되는 지 확인

아래와 같이 렌더되면 됨

여러개를 작성해도 잘 렌더되는 지 확인하기 위해 앱 컴포넌트 state의 리스트의 배열에 엘리먼트를 추가해보자

 

state = {
    value: 'hello',
    list: [
        {userid:'web7722',content:'하이1',date:'2022-04-26'},
        {userid:'web7722',content:'하이2',date:'2022-04-26'},
        {userid:'web7722',content:'하이3',date:'2022-04-26'}

    ]
}

 

아래와 같이 배열의 3개의 엘리먼트가 나오며

App 컴포넌트에서는 state 설정이 잘 이루어졌으며

Comment 컴포넌트에서는 props를 잘 전달받은 것을 확인할 수 있다.

 

하지만, 아직 렌더되는 화면의 li 내용은 반영되지 않은 점이 아쉽다.

 

 

 

다시 리스트 컴포넌트로 돌아와서 items 배열의 각각의 li에 들어갈 내용을 수정해주자

 

items = ()=> this.props.list.map((v,k)=>{
    return(
        <ul className ="comment-row">
            <li className="comment-id">{v.userid}</li>
            <li className="comment-content">{v.content}</li>
            <li className="comment-date">{v.date}</li>
        </ul>
    )
})

 

짠!

내용까지 잘 반영되어서 나온다

 

 

 

4. componentDidMount() 메서드로 CSR 적용

 

모든 컴포넌트가 완성되었다는 시점이 있다.

그 시점을 잡아주는 메서드가 componentDidMount메서드

 

앱 컴포넌트 안에 componentDidMount() 메서드를 작성해서

상태를 변경해주자

( 불변성 지켜주면서 상태 변경 시 >> 데이터 변경  > 화면 변경 == 렌더 메서드가 다시 실행된다)

 

 

4-1. App 컴포넌트 state의 list를 빈배열로 만들고

state = {
    value: 'hello',
    list: []
}

 

4-2. componentDidMount() 메서드 작성

componentDidMount(){
    this.setState({
        ...this.state,
        list:[
        {userid:'web7722',content:'안녕하세요2',date:"2022-04-21"},
        ]
    })
}

 

 

<참고>
axios + await 조합으로 쓸 경우
 1. 함수 선언해서 함수 안에서 액시오스 날리고, this.setState() 호출 후
 2. componentDidMount() 메서드 안에서 함수 호출

 

 

 

 

5. 누적 작성 코드(R)

<script type="text/babel">
class CommentList extends React.Component {
    items = ()=> this.props.list.map((v,k)=>{
        return(
            <ul className ="comment-row">
                <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>
            {this.items()}
        </li>
        )
    }
}
class CommentForm extends React.Component {
    render() {
        return(
        <li className ="comment-form">
            <form>
                <span className="ps_box">
                    <input
                        type="text"
                        className="int"
                        placeholder="댓글을 입력해주세요"
                    />
                </span>
                <input 
                    type ="submit"
                    className="btn"
                    value="등록"
                />
            </form>
        </li>
        )
    }
}
class Comment extends React.Component {
    render() {
        return(
            <ul className="comment">
                {this.props.children}
            </ul>
        )
    }
}

class App extends React.Component {
    state = {
        value: 'hello',
        list: [
            {userid:'web7722',content:'하이1',date:'2022-04-26'},
            {userid:'web7722',content:'하이2',date:'2022-04-26'},
            {userid:'web7722',content:'하이3',date:'2022-04-26'}

        ]
    }

    componentDidMount(){
        this.setState({
            ...this.state,
            list:[
            {userid:'web7722',content:'안녕하세요2',date:"2022-04-21"},
            ]
        })
    }

    render() {
        return(
            <Comment>
                <CommentForm/>
                <CommentList list = {this.state.list}/>
            </Comment>
        )
    }
}
    const root = document.querySelector('#root')
    ReactDOM.render(<App />, root)
</script>