- 현재까지 만든 화면
이번에 새롭게 시작한 프로젝트 부터는 리액트로 작업하게 되었다.
리액트 컴포넌트를 이용하여 props, state를 적극활용해보려고 노력하려고 한다...!
- 필요한 기능들을 구현하려면 어떤 것이 필요한 지 생각해보기
- 정보입력받기
- 정보저장하기
- 정보 업데이트하기
- 정보 삭제하기
- 반복되는 코드들 컴포넌트화 시켜 재사용 가능하게 만들어주기
위 두가지 사항을 중점적으로 생각하며 프로젝트를 만드려고 한다.
나는 우선 header, inputData(결과를 입력하는 곳), result(결과를 저장한 값이 노출되는 곳) 이렇게 나누었다.
코드 순서 ☘️
- 기본 레이아웃 구조를 짠 뒤 inputData 를 만들기 시작했다.
const medalColor = ["금", "은", "동"];
<h3>ENTER MEDALS</h3>
// 국가정보 입력
<div className="contents">
<div className="content">
<span>COUNTRY NAME</span>
<input
type="text"
placeholder="국가입력"
value={country}
onChange={medalCountry}
/>
</div>
// 메달 색별로 배열 변수를 만들어놓고 map()메서드를 사용하여 input이 금, 은, 동 1개씩 생길 수 있게 코드를 재사용 가능하게 써주었다.
{medalColor.map((color) => (
<div className="content" key={color}>
<span>{color}메달</span>
<input
type="number"
min="0"
placeholder="메달수입력"
value={medal[color]}
onChange={(event) => medalCount(color, event)}
/>
</div>
))}
<div className="buttons content">
<button onClick={addCountry}>ADD</button>
<button onClick={update}>UPDATE</button>
</div>
</div>
</>- 기본 구조를 만들고 저장하는 기능을 만들었다.
정보들을 받기위해
function InputData({ onAddResult }) {
const [country, setCountry] = useState("");
//input에 입력되는 나라를 저장하기위해 useState사용
const [medal, setMedal] = useState({ 금: 0, 은: 0, 동: 0 });
//input에 입력되는 메달개수를 저장하기위해 useState사용
// 메달국가 저장
const medalCountry = (event) => {
setCountry(event.target.value);
};
// 메달개수 저장
const medalCount = (color, event) => {
setMedal((prevMedals) => ({
...prevMedals,
[color]: Number(event.target.value), // 입력 값을 숫자로 변환
}));
};
// 국가추가 버튼 클릭 시
const addCountry = () => {
if (country === "" || Object.values(medal).every((val) => val === 0)) {
alert("국가와 메달개수를 입력해주세요");
return;
}
// 결과에 국가 추가
onAddResult({ country, ...medal });
// 입력 창 초기화
setCountry("");
setMedal({ 금: 0, 은: 0, 동: 0 });
};
- 현재 저장하는 기능까지 개발을 하였고 업데이트와 삭제가 남아있다. CRUD를 구현하기 위해 코드를 짜는 과정에서 코드리뷰를 팀원들과 하던중 나라도 같은 input을 쓰고 있기 때문에 type을 배열로 만들어주어 재사용할 수 있다는 것을 알게 되었다.
- 재사용 가능한 코드들을 정리하고 컴포넌트화 시켜보는 게 주목적이기 때문에 이것을 먼저 해결할 생각이다.
👀작업하면서 새롭게 알게된 것들
1. Every와 Some이란?
자바스크립트에서 every()는 배열의 모든 요소가 조건을 충족하는지 확인하고 (AND), some() 함수는 배열의 1개 요소라도 특정 조건을 충족하는지 확인(OR)하는데 사용한다.
some과 every함수에 callback함수를 인자로 주면 some은 각 요소들 중 하나라도 true를 리턴하면 값은 true이며, every의 경우 하나라도 false를 리턴할 경우 false가 된다.
2. React 로 작업한다고 해서 모든 파일을 jsx로 만들어야하는 것이 아니라 구분해서 만들어주어야한다.(구분하는 방법)
.js: React 컴포넌트가 아닌 일반적인 JavaScript 파일이나 설정 파일에 사용
.jsx: React 컴포넌트를 정의하는 파일에 사용
작업하면서 느낀 점 ⭐️
컴포넌트와 props, 단방향 상속, 어떻게 컴포넌트를 나누어야하는지 아직 큰 크림과 작은 그림을 구별하고 구분하는 것이 쉽지 않다. 많은 경험이 필요할 것 같고 공부가 필요할 것 같다. spread 와 rest함수를 익혀 좀 더 잘 써보면 좋을 것 같고 react로 넘어오면서 컴포넌트를 잘 활용하기 위해 메서드를 잘 쓰고 적절하게 찾아야겠다는 생각이 많이 들었다...!
오늘도 열심히 공부하자 ㅠㅠㅠ🥺
so