Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[3주차-ts] 이상형 with TS #6

Open
wants to merge 17 commits into
base: main
Choose a base branch
from
Open

[3주차-ts] 이상형 with TS #6

Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
66e2629
init: 초기세팅
henization Jun 15, 2022
8aeeaa6
init: 이미지 경로 설정
henization Jun 15, 2022
fb0aeac
feat: route 설정
henization Jun 15, 2022
234f415
feat: image index파일로 묶기
henization Jun 15, 2022
207dae4
fix: 폴더구조 수종
henization Jun 15, 2022
fd2218a
feat: 라운드 개수 계산 수정
henization Jun 15, 2022
bd9c992
feat: 기능구현
henization Jun 15, 2022
9b64008
fix: 이미지 배열 수정
henization Jun 16, 2022
18a5293
fix: map에 key값 추가
henization Jun 16, 2022
622fd34
fix: 조건문 수정
henization Jun 16, 2022
f150cc0
chore: 파일 정리
henization Jun 16, 2022
a51386f
feat: Complete 페이지 완성
henization Jun 16, 2022
673fbe0
style: 주석 정리
henization Jun 16, 2022
1bf2548
fix: 폴더 구조 수정
henization Jun 19, 2022
9d18660
fix: 경로 수정
henization Jun 19, 2022
aa82b6a
style: styled-component 명 수정
henization Jun 19, 2022
9b14518
feat: 이미지 폴더 이동 및 경로 수정
henization Jun 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 13 additions & 9 deletions week3_ts/src/pages/Main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,19 @@ export default function Main() {
};

// 화면이 리렌더링 될 때 마다 참가자들 배열과 승리자들 배열 확인
fighterList.length === 0 &&
useEffect(() => {
if (matchWinners.current.length >= 8) checkLists("8강");
else if (matchWinners.current.length >= 4) checkLists("4강");
else if (matchWinners.current.length >= 2) checkLists("결승");
else if (matchWinners.current.length === 1) {
navigation("/complete", { state: {checkLists(), matchWinners} });
}
});

useEffect(() => {
if (fighterList.length === 0 && matchWinners.current.length >= 8) checkLists("8강");
else if (fighterList.length === 0 && matchWinners.current.length >= 4) checkLists("4강");
else if (fighterList.length === 0 && matchWinners.current.length >= 2) checkLists("결승");
else if (fighterList.length === 0 && matchWinners.current.length === 1) {
console.log(matchWinners.current[0]);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

콘솔은 지워주셔도 좋을 것 같습니다😋😋

navigation("/complete", {
// navigation에 값을 다중으로 넘겨주는 방법
state: { checkLists: checkLists("16강"), matchWinners: matchWinners },
});
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

내가 혠니랑 열띤 토론하고나서 이제 다시 찾아보니까 Common API reference - 리액트 navigate에서 보면 navigation.navigate(name, params) 형태로 들어가는 거라서 저기 params에는 함수나 컴포넌트가 들어갈수 없는 것같아!

그래서 값을 다중으로 넘기려면

state: { checkLists: "16강", matchWinners: "이겻다" },

이런식으로 얼마든지 가능한데! 혠니 코드는 함수랑 ref 자체를 넘겨받는거라 인식을 못하는 것같아! 여기서 state를 넘겨주지 말고 몬가 props로 넘기거나 그래야 할 것가튼데 흠흠 혹싀 이해 안데면 알랴주구 >.<

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 .... !! 값을 다중으로 넘기는 건 가능하되, 함수랑 ref 자체를 넘기는 건 안된다! 그러므로 props를 사용해야된단 뜻이겠지?!

});

return (
<StyledRoot>
Expand Down