react 버튼 클릭으로 component 변경하는 방법

Question

안녕하세요프로젝트를 만들어보는 중에 해결되지 않는 부분이 있어서 질문드립니다 제가 만들고 싶은 부분은위 처럼 태그가 하나라도 선택이 되면 에서 로 바뀌게 구현하고 싶습니다. function Select() { let [characters] = useState(characterData); let [locations] = useState(locationData); let [, setSelectId] = useState(); let [clickValue, setClickValue] = useState(false); let [characterExpanded, setCharacterExpanded] = useState(true); let [locationExpanded, setLocationExpanded] = useState(false); let [characterFilter, setCharacterFilter] = useState([]); let [locationFilter, setLocationFilter] = useState([]); const characterBtn = id => { setSelectId(id); setClickValue(clickValue => !clickValue); characters[id].isChecked = clickValue; }; const locationBtn = id => { setSelectId(id); setClickValue(clickValue => !clickValue); locations[id].isChecked = !clickValue; }; useEffect(() => { setCharacterFilter( characters.filter(character => character.isChecked === true) ); }, [clickValue, characters]); useEffect(() => { setLocationFilter( locations.filter(location => location.isChecked === true) ); }, [clickValue, locations]); return (

{/* 첫번째 버튼 */}

{ setCharacterExpanded(characterExpanded => !characterExpanded); setLocationExpanded(locationExpanded => !locationExpanded); }} > 어떤빵?

); })}

{tag.name}

);} function SelectBtn(props) { return (

);}현재코드는 이렇습니다! selectBtn이 onClick 되었을 때 isChecked를 확인해서 컴포넌트를 변경해주는 방법을 해볼까 싶어서삼항연산자로 해봤는데 작동이 안되네요... 힌트라도 부탁드립니다!!

지로_ · Answer

onClick&#61;{() &#61;> { props.selectBtn(props.selectData.id); // 뭐든 아이디를 줌 }} > 그러면 selectBtn&#61;{characterBtn} 여기 있는 characterBtn이 실행 됨 const characterBtn &#61; id &#61;> { setSelectId(id); setClickValue(clickValue &#61;> !clickValue); 얘네 비동기 characters[id].isChecked &#61; clickValue; //얘 동기 이기 때문에 아직 false(기본값이라 생각함) 상태 // 바뀐 후에 비교해야한다 판단 }; characters[id].isChecked &#61; clickValue; // 이 아이를 useEffect(()&#61;>{characters[id].isChecked &#61; clickValue; },[clickValue]) 이럼 되지 않을까요

검둥오리 · Answer

제가 질문을 잘 이해한 게 맞다면...태그를 여러 개 선택하면 배열에 저장하는 것 같은데 useEffect로 배열 길이가 1 이상이면 state를 true나 1 로 변경해주고JSX에서는 {state? Recommend : News}로 하거나, state&#61;&#61;&#61;0 && Page1state&#61;&#61;&#61;1 && Page2state&#61;&#61;&#61;2 && PAge3........으로 하면 되지 않을까요

1wooseok · Answer

(characterFilter.length > 0 || locationFilter.length > 0) ? : 이런식으로 하면 되지 않을까요

G9 · Answer

지로 검둥오리 1wooseok 제가 아직 공부가 많이 부족한가봐요..ㅜㅜ알려주신 방법들로 해보고 성공해오겠습니다!도움주셔서 정말 감사합니다!!

react 버튼 클릭으로 component 변경하는 방법

4개의 답변

#onclick 목록