리액트 map 함수 개별 클릭이벤트

[장경민]

선생님  맵함수로 리스트를 만들어서

해당 리스트를 클릭 시 마다  e.currentTarget 으로  클릭한녀석에게만  효과를 주는것 까진 알겠는데

1번 리스트를 클릭했을때 classList.add ('active') 를 주고 2번이나 다른 리스트를 클릭했을때

1번 리스트의 클래스를 제거하기위해서는 어떠한 방법으로 코드를 짜야할까요??

 

맵함수 내에 개별 스타일링 주는 법을 알고싶습니다.

[codingapple]

.active가 들어있는 요소를 찾아서 classList.remove('active') 해주세요 라고 코드한줄 짜면 될듯요 

state만들어두고 state가 이럴 경우 class명 추가해주세요 라고 삼항연산자 쓰는 방법도 있습니다

 

[장경민]

잘 이해가 가지않는데 

일단 맵으로 돌릴때 콜백함수가 커렌트 요소 , 요소 인덱스로 돌아간다면

 const [글자들 , set글자] = useState([

 {Id: 0 , 글내용: '글자2'},

{Id: 1 , 글내용: '글자2'},

{Id: 2 , 글내용: '글자3'},

])

글자들.map( (current , index ) => {

retrun (

    <div>

       {current.id}  // 결과 0,1,2  3개 생성

< /div>

)

} )

위처럼 커렌트로 돌리게 될경우에 

 글자의 배열에서 {Id: 0 , 글내용: '글자2'} 에 추가로 true false 를 주고

 {Id: 0 , 글내용: '글자2', 상태:false}

이제 맵 내부에서

글자.map( (current , index ) => {

retrun (

    <div onClick={(e)=>{

       current.상태 != false

       ? 클래스 추가 

       : 클래스 삭제

      }}>

       {current.id} 

< /div>

)

} )

이렇게 하고 해당 맵함수 돌아가는 div에 온클릭시 클릭요소 빼고는  다 true 로 바꿔라 라는true false 로 반환되는 state 만들어서 버튼 누를때마다 변경되게 하면 돌아갈까요?

[장경민]

모바일로 작성해서 오타나 문법이 틀렸을수도 있습니다. 저렇게 해서 맵 돌아가는 div 클릭 요소들이 개별로 돌아갈수있을까요?

[codingapple]

네 onclick말고 className={} 안에 삼항연산자 쓰면 될듯요  

탭기능같은데 지금 보이는 탭 id가 무엇인지 따로 state로 만들어둔다음 

<div className={지금보이는탭 == current.id ? 'active' : null }  >

    {current.id}

< /div>

이래도 될듯요 

[장경민]

<div id={cur.id} className={누른거 == cur.id ? 'click' : null } key={cur.id} style={{width: '200px',margin: '20px auto 20px auto',padding:' 20px',
                            border: '1px solid'}} onClick={(e)=>{
                               
                             
                               console.log(cur.상태);
                               console.log(누른거);
                               set누른거(cur.id);
                           
                               
                            }}>

 생각한대로 잘될까 했는데 알려주신 방법 참고하여 적용하니 바로되네요  감사합니다! ㅎㅎ

[글쓴이]

글