생각보다 과제가 일찍 끝나서 클론코딩(?)이라고 하긴 뭣하지만 Naver에 뉴스 아래에 있는
Tab을 누르면 각각 다른 이미지가 나오는 것을 React로 만들어 보려고 했다
과제도 그렇고 혼자 작성했다고 하기엔 React 사용법을 잘 모르겠다
이론은 머리로 이해가 가는데 어느 부분에서 어떻게 써야할 지
함수, 변수 만들 때랑 똑같다 지금...
이론만 안다.. 활용이 안된다 전혀 ..후
혼자 해본 방법으로는 useState를 사용하지도 못했고 vanilla.js로 DOM이벤트만 작성했다
component 빼는 것만 안다
이게 무슨... 현타오네
어제부터 몸도 안좋아서 머리도 더 안 돌아가는 것 같다
컨디션 조절 좀 해야겠다
요즘 진짜 할 수 있을까라는 생각이 매일 든다
뭐 하겠지 일단 뭐라도
1번째 방법 DOM이벤트 사용
버튼들을 만들고 컴포넌트 빼는거만 아는 수준이라
버튼과 이미지들만 컴포넌트로 만들었다
이미지 컴포넌트에 이미지 주소를 2개 주고
한 버튼당 클릭시 이미지2개를 표시하게 하는 작업을 할것이다
총 8개의 Tab을 만들었고 각각의 이미지들이 표시되는 이미지페이지를 8개를 만들었다
ImgBox에 src, src2 props를 받아와서 출력해주고
img값에 alt를 넣지 않으니 오류가 나서 alt도 지정해주었다
ImgBox.js(component)
function ImgBox({ src, alt, src2, name, display }) {
// console.dir(name);
return (
<div className={name} style={{ display: display }}>
<div className="img-size">
<img className="img-box" src={src} alt={alt} />
</div>
<div className="img-size">
<img className="img-box" src={src2} alt={alt} />
</div>
</div>
);
}
export default ImgBox;App.js에서 component를 출력해주고 일단 전체적인 사진들에 display를 none으로 지정했다
첫번째 섹션만 flex로 지정했다
Button.js(component)
function Button({ children, onClick, cursor }) {
return (
<button className="btn-box" onClick={onClick}>
{children}
</button>
);
}
export default Button;버튼에는 onClick과 children props를 넘겨주었다
각각의 버튼마다 이름을 변경해야 하기 때문에 children을 넘겨주었다
여기서부터 문제인데 각각의 버튼마다 onClick 함수를 생성했다
그래서 코드가 지저분해지기 시작했다
querySelector로 각각의 이미지 박스들을 가져와서
그 안에 보여줄 이미지 박스만 flex지정하고 나머지는 다 none으로 지정했다
그렇게 함수가 8개나 되었고 함수 안에는 8개의 style.display가 들어가게 되었다
그나마 좀 깔끔하게 하고자
querySelector로 함수 밖에 const로 해당 섹션들을 지정해주었는데
오류나서 되지도 않더라..
함수 안에 그냥 document.querySelector('css선택자').style.display를 넣어야 flex, none값이 작동되었다
const entertain = document.querySelector(".entertain")
console.log(entertain) // null 출력
function enterChange() {
entertain.style.display = "flex";
console.log(entertain) // 오류
document.querySelector(".sports").style.display = "none";
document.querySelector(".car").style.display = "none";
document.querySelector(".webtoon").style.display = "none";
document.querySelector(".economy").style.display = "none";
document.querySelector(".ott").style.display = "none";
document.querySelector(".recipe").style.display = "none";
document.querySelector(".living").style.display = "none";
}-null값 출력 및 오류
밖에서 const로 지정하고 함수 안에서 인식이 안되는 것 같다
이것저것 찾아보니 ref를 쓴다고 하면 되는데 왜 이런 오류가 나는지를 못찾았다
그리고 React에서는 DOM이벤트를 직접 사용하는 것을 지양한다고 한다
그래서 이유가 뭐냐고... 안에서 직접 가져와서 거기다 style.display를 넣으면 되는데
왜 밖에 빼면 안되냐고 묻는 거잖아...
후.. 더 찾아봐야지
일단 안에 넣어서 원하는대로 Tab눌렀을 때 이미지 박스들이 변경되는 것은 구현했다
근데 분명 다른 방법이 있을거다
DOM 사용하지 않고 React만 사용해서 하는 방법이..
React로 Tab만들기로 구글링을 했다
이것저것 찾아보다 어느 친절하신 분이 만들어 놓은 것을 찾아서 인용했다
2번째 방법 useState 사용
이 방법을 쓰니 App.js가 깨끗해졌다
61줄로 작성한 코드가 component를 따로 빼주니
7줄로 끝났다
왜 쓰는지 알겠다
근데 어떻게 쓰냐고 도대체.
어디 부분에서 어떻게 가져와서 쓰냐는가가 문제다
새로운 component를 만들었다
Tab.js(component)
function Tab() {
const [activeIndex, setActiveIndex] = useState(0);
function tabClickHandler(index) {
setActiveIndex(index);
}
const tabContArr = [ //배열들
{
tabTitle: (
<Button
className="btn-box"
children="엔터"
onClick={() => tabClickHandler(0)}
></Button>
// 만들어 놓은 Button component로 변경
),
// <button onClick={() => tabClickHandler(0)}>엔터</button>
tabCont: (
<ImgBox
name="entertain-2" // 각각 8개의 className을 지정
src="이미지주소"
alt="엔터"
src2="이미지주소2"
></ImgBox>
// 만들어 놓은 ImgBox component로 변경
),
},
// ...8개의 배열 만듬
}
return (
<div>
<div className="category">
{tabContArr.map((section, index) => {
return section.tabTitle;
// <div key={index}></div>
})}
</div>
<div>{tabContArr[activeIndex].tabCont}</div>
</div>
);
}
export default Tab; map메소드, useState 사용해서 하셨다
function tabClickHandler(index) {
setActiveIndex(index);
}버튼에 이벤트 함수를 만들어주고 ()안에 index값에 배열의 index값을 각각 넣어준다
그렇게 각각의 index값을 넣어주고 해당 Tab을 눌러주면
이미지 박스가 변경되게 하셨다
setActiveIndex로 index값을 변경해줬다
<div>{tabContArr[activeIndex].tabCont}</div>setActiveIndex로 index값을 변경한 배열의 tabCont를 화면에 출력한다
코드를 보면 확실히 어떤건지 이해는 가는데
아직 활용은 못하겠다
점점 더 해보면 늘겠지라는 생각을 갖고 있긴 한데
그래도 아직 걱정은 된다
