1) 하단바 Component 생성 및 사용
2) 메뉴바 만들기
// 먼저 개별 radio버튼을 나타내는 component를 생성
function Radio({children,value,name,defaultChecked,disabled}){
return(
<label>
<input type="radio" value={value}name={name} defaultChecked={defaultChecked} disabled={disabled} />{children}</label>);
}
// 다수의 radio를 사용할 예정이기에 RadioGroup component를 생성
function RadioGroup({label,children}){
return(
<fieldset>
<legend>{label}</legend>
{children}
</fieldset>
);
}
Radio,RadioGroup component는 비제어(uncontrolled) 컴포넌트로 바로 사용이 가능하다!
→ 2️⃣ list를 이용해서 만들자
클릭하면 이동(다른 컴포넌트로) 및 굵은 글씨로 바뀌는 함수를 만들어보자!(SelectMenu 함수 만들기)
className 동적할당 하는 방법
3) 게시글 컴포넌트 만들기
function SimplePost({title,author,time,count,like,reply}){
return(
<>
<div className="post_container">
<div id="text_box">
<h2>{title}</h2>
<div><span id="cummunity_author">{author}</span> <span id="cummunity_time">{time} </span></div>
<div><span id="cummunity_count">조회수 {count} </span><span id="cummunity_like">추천수 {like}</span></div>
</div>
<div id="reply_box">
<h4>{reply}</h4>
<span id="cummunity_reply">댓글</span>
</div>
</div>
<hr className="mainline"/>
</>
);
}
4) 어떻게 게시글만 움직이게, 화면에서 벗어날때 어떻게 할까?