목차
- 기본 틀 작성
- form
- list
- 누적 작성 코드
게시판 view 페이지에 들어갈 댓글 기능을 구현해보자!
틱택토 게임 때 작성했던 레이아웃을 가지고 와서
컴포넌트만 변경해서 기본 틀을 작성해보자!
다만, 이번에는 props 속성 중 children이라는 속성을 사용해서
자식이 아닌 자손에게 props를 넘겨주는 스킬을 사용해 볼 것이다.
<참고> props.children이란?
props 속성 중 children 사용 시,
자식 뿐만이 아닌 자손에게 props를 전달 가능
앱 컴포넌트에도 상태가 존재하는 경우
예를 들면 (로그인 기능의 로그인 구분값)
Comment 컴포넌트가 댓글에 대한 state값을 가지고 있는 경우
state 값을
App 컴포넌트에 있는 아이들이 Comment 컴포넌트에 넘겨주고 Comment에서 CommentForm이나 CommentList로
또 수정의 경우에는 CommentList에서도 업데이트로도 넘겨줘야 함
이처럼 상위 컴포넌트로부터 하위 컴포넌트까지 여러 단계를 거쳐서 props를 전달하고자 하는 경우,
children 사용하면 이러한 번거로움을 어느 정도 해소할 수 있다.
1. index.html의 script에 기본 틀 작성
1-1. 3가지 컴포넌트 작성 후, ul과 li로 렌더될 태그 작성
1-2. Comment 컴포넌트의 ul 엘리먼트의 innerHTML로 props를 자손들에게 전달
class CommentList extends React.Component {
render() {
return(
<li>
</li>
)
}
}
class CommentForm extends React.Component {
render() {
return(
<li>
</li>
)
}
}
class Comment extends React.Component {
render() {
return(
<ul className="comment">
{this.props.children}
</ul>
)
}
}
1-2. App 컴포넌트의 render()메서드의 return 값으로 자손 컴포넌트 작성
class App extends React.Component {
state = {
value: 'hello'
}
render() {
return(
<Comment>
<CommentForm/>
<CommentList/>
</Comment>
)
}
}
2. CommentForm 컴포넌트의 return에 폼 형태 먼저 작성하기
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>
)
}
}
3. CommentList 컴포넌트의 return에 List 형태 작성하기
class CommentList extends React.Component {
render() {
return(
<li>
<ul className ="comment-row">
<li className="comment-id">아이디</li>
<li className="comment-content">제목</li>
<li className="comment-date">날짜</li>
</ul>
</li>
)
}
}
4. 누적 작성 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css" type="text/css">
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class CommentList extends React.Component {
render() {
return(
<li>
<ul className ="comment-row">
<li className="comment-id">아이디</li>
<li className="comment-content">제목</li>
<li className="comment-date">날짜</li>
</ul>
</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 {
render() {
return(
<Comment>
<CommentForm/>
<CommentList/>
</Comment>
)
}
}
const root = document.querySelector('#root')
ReactDOM.render(<App />, root)
</script>
</body>
</html>
'React > 5. 댓글' 카테고리의 다른 글
| 댓글4. 기능구현(U) (0) | 2022.04.25 |
|---|---|
| 댓글3. 기능 구현(C) -수정중 (0) | 2022.04.25 |
| 댓글2. 기능 구현 (R) (0) | 2022.04.25 |
댓글