인프런 커뮤니티 질문&답변

분명히 코드를 그대로 따라 쳤는데 1초에 두 번씩 알림이 나오는 경우도 존재하나요?

Warning: Each child in a list should have a unique "key" prop. 오류도 떴습니다.

각각 notification.jsx, notificationList.jsx 코드입니다

import React from "react"

const styles = {
    wrapper: {
        margin: 8,
        padding: 8,
        display: 'flex',
        flexDirection: 'row',
        border: '1px solid grey',
        borderRadius: 16
    },
    messageText: {
        color: 'black',
        fontSize: 16
    }
}

class Notification extends React.Component {
    constructor(props) {
        super(props)

        this.state = {}
    }
    render() {
        return (
            <div style={styles.wrapper}>
                <span style={styles.messageText}>{this.props.message}</span>
            </div>
        )
    }
}

export default Notification

import React from 'react'
import Notification from './notification'

const reservedNotifications = [
    {
        message: '안녕하세요, 오늘 일정을 알려드립니다.'
    },
    {
        message: '점심식사 시간입니다.'
    },
    {
        message: '이제 곧 미팅이 시작됩니다.'
    },
    {
        message: '안녕하세요, 오늘 일정을 알려드립니다.'
    },
    {
        message: '점심식사 시간입니다.'
    },
    {
        message: '이제 곧 미팅이 시작됩니다.'
    },
    {
        message: '안녕하세요, 오늘 일정을 알려드립니다.'
    },
    {
        message: '점심식사 시간입니다.'
    },
    {
        message: '이제 곧 미팅이 시작됩니다.'
    },
    {
        message: '안녕하세요, 오늘 일정을 알려드립니다.'
    },
    {
        message: '점심식사 시간입니다.'
    },
    {
        message: '이제 곧 미팅이 시작됩니다.'
    },
    
]

var timer

class NotificationList extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            notifications: []
        }
    }

    componentDidMount() {
        const { notifications } = this.state
        timer = setInterval(() => {
            if(notifications.length < reservedNotifications.length) {
                const index = notifications.length
                notifications.push(reservedNotifications[index])
                this.setState({
                    notifications: notifications
                })
            } else {
                clearInterval(timer)
            }
        }, 1000)
    }

    render() {
        return (
            <div>
                {this.state.notifications.map(v => {
                    return <Notification message={v.message}/>
                })}
            </div>
        )
    }
}

export default NotificationList