2022-11-28 (월)
🧀 개인과제 어려웠던 부분 코드해석
const addUserHandler = () => {
const newUser = {
id: users.length + 1,
title: title,
todo: todo,
isDone: true,
};
setUsers([...users, newUser]); //[...A] 전개연산자
};
const deleteUserHandler = (id) => {
const newUserList = users.filter((user) => user.id !== id);
//for문처럼 id값이 같은 값이 나올 때까지 계속 돈다.
setUsers(newUserList);
};
: addUserHandler를 실행하면 newUser라는 이름으로 (내용)배열이 1씩 추가되고, setUsers컴포넌트를 통해 기존의 [...전개연산자]와 [newUser]가 함께 나타남.
<input //1. input칸에
className="txt"
value={title} //3. 2번에서 받아온 값이 value에 저장된다.
onChange={(e) => setTitle(e.target.value)}
//2. setTitle이 새로 입력된 value 값을 targeting해서 3번의 값을 바꿔준다.
/>: input칸에 setTitle이 새로 입력된 value값을 targeting해서 3번의 값을 바꿔준 후 2번의 value에 저장한다.
<CustomButton
width="130px"
height="40px"
backgroundColor="transparent"
border="2px solid green"
onClick={() => {
props.handleChange(props.user.isDone);
if (props.user.isDone === true) {
//값을 변경하는 방법
props.user.isDone = false;
} else if (props.user.isDone === false) {
props.user.isDone = true;
}
}}
>
{props.user.isDone === true ? "완료" : "취소"}
</CustomButton>: Custombutton을 onClick하면 handleChange에서 props한 (user의 isDone값)내용이 실행된다. 'handleChange'는,
만약에 내가 고른 user의 isDone값이 true이면 false값을 할당해주고, 버튼 글자의 조건이 true였기 때문에 "완료"로 나온다.
아니면 내가 고른 user의 isDone값이 false이면 true값을 할당해주고, 버튼 글자의 조건이 false였기 때문에 "취소"로 나온다.
function CustomButton(props) {
const { width, height, border, backgroundColor, color, onClick, children } =
props;
console.dir(props);
if (backgroundColor) {
return (
<button
style={{
width: width,
height: height,
backgroundColor: backgroundColor,
color: color,
border: border,
borderRadius: "5px",
}}
onClick={onClick}
>
{children}
</button>
);
}
return <button onClick={onClick}>{children}</button>;
}
export default CustomButton;: 위 코드는 분리한 Component 파일 전체인데
Component인 CustomButton들이 각자 다르게 CSS값을 받기 위해 button의 style값을 Component에 허락받듯이 style과 맨위 const 부분에 '먼저' 써준 후, 아래 사진(App.js 부분사진)처럼
<CustomButton
width="140px"
height="40px"
border="0px"
color="white"
backgroundColor="#008080"
onClick={addUserHandler}
>
추가하기
</CustomButton>각자 필요한 CSS내용을 적어주면 된다.
ㅡㅡㅡㅡㅡ
🍋 개인과제 배포 링크 :
https://my-to-do-list-eta.vercel.app/
🍕 오늘 알게된 간단한 내용
- CSS는 특정부분에 1개만 주고싶으면 태그뒤에 style={{...}}을 붙여서 적으면 되지만 Component는 Component에 style 값을 주어야함. (위 내용 참고)
- Gitbash(vs코드 터미널도 가능)에서
Ctrl + c (2번 눌러야 할 수도 있음)를 누르면 localhose:3000 연결 종료됨. - code 폴더이름 : 해당폴더의 vs코드창이 열림
- line-height : 부모의 height값과 일정하게 주어야함. 세로로 중간정렬해줌.
(display:flex; + align-items:center; 2개가 안먹힐 때 사용했더니 먹혔음 !) - border 에는 3개의 값까지 넣어줄 수 있음.
(border : "2rem solid black",)
🍫 Component 만들기
- 컴포넌트 함수 형태 먼저 만들어주기
function 함수명(){
return (
<div>
내용
</div>
}
)1번 예시
function NewsBox(props) {
//console.log(props);
return (
<div
style={{
width: "124.61px",
height: "65px",
}}
>
반갑습니당 내용 적는 곳
</div>
);
}ㅡㅡㅡㅡㅡ
2. 넣고 싶은 App return값 자리에
<컴포넌트이름 />
붙여넣으면 페이지에 나타남.
2번 예시
function App() {
return (
<div className="news-stand">
<div className="stand-txt">📄뉴스스탠드 </div>
<div className="news-box">
<NewsBox />
<NewsBox />
</div>
</div>
);
}ㅡㅡㅡㅡㅡ
1번+2번 내용 렌더링 모습
Component가 어려워서 네이버 뉴스스탠드로 만들기로 Component 이해 연습 ❗
ㅡㅡㅡ
border가 정해진 width 750px안으로 들어가야하는데 0.1px을 줘도 밖으로 선이 잡혀서 밑으로 내려가는 문제 발생😢
MDN에서 border를 검색해서 groove 스타일을 줬는데도 실패함
구글에 'CSS border 안쪽으로'를 구글링해서
boxSizing: "border-box"위 코드를 해당 CSS부분에 추가하면 해결가능하다고 하심
해결완료❗
function NewsBox(props) {
//console.log(props);
return (
<div
style={{
width: "125px",
height: "65px",
backgroundColor: "yellow",
display: "flex",
alignItems: "center",
justifyContent: "center",
border: "0.1px solid black",
boxSizing: "border-box"
>
반갑습니당
</div>
);
}
