Comments Component

Commnet 컴포넌트에 props 추가하기

커멘트 컴포넌트에 표시되는 작성자 이름과 게시글 내용을 동적으로 변경하기

<div style={styles.contentContainer}>
    <span style={styles.nameText}>
    	{props.name}
    </span>
    <span style={styles.commnetText}>
        {props.comment}
    </span>
</div>

• name과 commnet가 정의되지 않았기때문에 undefined로 아무것도 나오지 않는다.
• 그러면 props를 추가해줘야한다.
  - comment 컴포넌트를 사용하고 있는 commnetList 컴포넌트에 props값을 입력해준다.

[컴포넌트 분리]

//Commnet.jsx
import React from 'react'

const styles = {
	중략..
}

function Comment(props) {
    return (
        <div style={styles.wrapper}>
            <div style={styles.imageContainer}>
                <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" style={styles.image} alt="userImage" />
                {/* <img src={process.env.PUBLIC_URL + "images/user.png"} /> */}
            </div>

            <div style={styles.contentContainer}>
                <span style={styles.nameText}>{props.name}</span>
                <span style={styles.commnetText}>
                    {props.comment}
                </span>
            </div>
        </div>
    )
}

export default Comment

comment 데이터를 별도의 객체로 분리하기

분리시켜서 동적으로 받아온 데이터를 표시할 수 있는 구조로 만들기

//CommentList.jsx
import React from 'react'
import Comment from './Comment'

const comments = [
    {
        name: '홍길동',
        comment: '안녕하세요. 첫번째 게시글입니다.'
    },
    {
        name: '박명수',
        comment: '안녕하세요. 두번째 게시글입니다.'
    },
    {
        name: '정준하',
        comment: '안녕하세요. 세번째 게시글입니다.'
    },
]

function CommentList(props) {
    return (
        <div>
            {comments.map((comm) => {
                return (
                    <Comment name={comm.name} comment={comm.comment} />
                )
            })}
        </div>
    )
}

export default CommentList

---

state와 Lifecycle

state는 클래스, 함수 컴포넌트에서 사용함
lifecycle은 클래스 컴포넌트에서 거의 사용하지 않음

State
리액트에서 state는 리액트 Component의 상태를 말한다.
리액트 컴포넌트의 변경 가능한 데이터를 state라고 말한다.

중요한점!
렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다.
왜냐하면 state가 변경 될 경우 컴포넌트가 re-rendering되어 성능 저하를 야기시킬 수 있다.

[State는 javascript 객체이다.]
모든 클래스 컴포넌트에는 constructor함수가 존재한다.
클래스가 생성될 때 실행된다.

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

        this.state = {
            liked: false
        }
    }
}

현재 컴포넌트의 state를 정의

• class component: constructor(생성자)에서 state를 정의함
• function component: useState라는 Hooks로 정의함

[class component에서 state를 변경할 때]
state는 컴포넌트 렌더링과 관련된 부분이기에 직접 수정 할 수 없다. (하면 안된다)
setState를 이용해서 수정한다.

//state를 직접 수정하지 못한다.
this.state = {
    name: 'Lili'
}

//setState 함수를 통한 수정을 해야한다.
this.setState({
    name: 'Lili'
})

Lifecycle(생명주기)

component가 계속 존재하는 것이 아니라, 시간의 흐름에 따라 생성 - 업데이트 - 소멸된다.

출생(Mounting): ComponenetDidMount

• constructor / 생성자 실행 (클래스 컴포넌트에서는 생성자를 사용한다.)

인생(Updating): componenetDidUpdate

• New props
• setState()
• forceUpdate()

사망(Unmounting): compoenetWillUnmount

• 상위 컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않을 때 컴포넌트는 소멸된다.

---

class 함수에서 state
constructor안에 있는 this.state는 생성자에서는 앞으로 사용할 데이터를 넣어서 초기화 한다.

setInterval

---

• 함수 컴포넌트

  • state 사용 불가
  • Lifecycle에 따른 기능 구현 불가
  • Hooks으로 클래스 컴포넌트에 사용하는 것처럼 모두 동일하게 사용 할 수 있다.

• class 컴포넌트

  • 생성자에 state 정의
  • setState()함수를 통해 state 업데이트
  • Lifecycle 메서드 제공

Hooks
useState: state를 사용하기 위한 Hooks
const [변수명, set변수명] = useState(초기값)

• 변수 각각에 대해 set함수가 따로 존재한다.