관습에 맞는 코딩에 대한 질문입니다.

[이도현]

list 클릭시 여러동작을 하고 싶어서 App내 return 밖에서  함수를 만들었습니다.

크게 2가지 기능입니다. (
pageview눈깔 +1 (따봉대신 만든 것) 의 개별동작 , 
modal창 UI  - modal 창 close면 open과 함께 해당 list 제목 출력, 동일 list 클릭 시 modal창  close , 이전 클릭과 다른 list 클릭 시  해당 list 제목 출력 
)

 

 

이것저것 시도해보다가  함수의 매개변수로  map() 의 2번째 파라미터 i 를 주어서 결국 돌아가는 상태가 되었는데,
이런 코드들이 리액트적인 관습 ? 어떤 그런 틀에 맞는 행동인지... 가 궁금합니다.

강의 같은거를 들으면 항상 그대로 따라하지 않고고 기능을 살짝 변형 해본다던지 ,다른곳에 붙여본다던지 하는데
그럴 때 마다 강의와는 다른 코드를 보게 되니깐 이게 맞는건지, 잘 짠건지, 공부를 잘 해나가고 있는건지 의구심이 듭니다.
고런 뜻에서의 질문입니다.

 

아래는 해당 코드 입니다. ( List.js   , Modal.js 따로 보관) 

<!--more-->

function App(){
  //state 
  let [topic,topicChange] = useState(['daily news ?','Today issue ?']);
  let [pageView,pageViewChange] = useState([0,0]);
  let [modalState,modalStateChange] = useState(false);
  let [topicNumber,topicNumberChange] = useState(0);
  //state

  //function
  function changeTopic(){
    let newTopic = [...topic];    // deep copy   
    if(topic[0] === 'daily news ?'){
      newTopic = ['미스터리한 개발자 ✨','Mr.Lee의 등장! ✨'] ;
      topicChange(newTopic);
    }
    else{
      newTopic = ['daily news ?','Today issue ?'] ;
      topicChange(newTopic);
    }
  }

  function listClick(i){
    let newPageview = [...pageView]; // deep copy  
    newPageview[i] = newPageview[i]+1 ;
    pageViewChange(newPageview);
  
    if(modalState===false){
      modalStateChange(!modalState);
      topicNumberChange(i);
    }
    else if(topicNumber===i){
      modalStateChange(!modalState);
    }
    else{
      topicNumberChange(i);
    }
  }
  //function
  
  //html
  return (
    <div className="App">
      <div className="nav">
        <div>Mr.Lee Blog</div>
        <button onClick={ changeTopic } className="changeTheme">secret room</button>
      </div>    
      {
        topic.map((a,i)=> {
          return (    
            <List topic={a} pageView={pageView[i]} listClick={ ()=>listClick(i) } />
          )
        })
      }
    

      {
        modalState === true
        ? <Modal topic={topic} topicNumber={topicNumber} date="21.04.26" detail="미스터리가 개발자를 선택한 이유" />
        : null
      }
    </div>
  );
  //html
}

[codingapple]

관습그런건 별로 없고 함수만드는건 자유입니다

그리고 state변경함수는 보통 영어로 set어쩌구 이렇게 작명합니다

listClick={ ()=>listClick(i) } 이건 좀 이상해보이는데 listClick이라는 함수를 props로 전달하는 것입니까 함수를 전달하고 싶으면 함수 이름만쓰시고

함수의 실행 결과를 전달하고 싶으면 listClick(i) 이렇게 쓰면 되지않을까요 

 

[이도현]

답변 감사합니다.
답변 내용처럼   
저는 listClick 이라는 함수를 props로 전달하려는것이 맞고
listClick 함수의 파라미터로 map함수의 i를 전달해야 합니다.(0,1) 
1번, 2번 각 list를 클릭할때 listClick(0) 과 listClick(1)  이 작동 되게 하고 싶은 것 입니다.

선생님의 말씀대로 

listClick={ ()=>listClick(i) }   를  listClick={ listClick } 로 바꾸면 i의 값이 전해지지 않아 실행이 안되고,

listClick={ ()=>listClick(i) }  를  listClick={ listClick(i) } 로 바꿨더니 
Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
index.js:1 The above error occurred in the <App> component:
이렇게 두개의 에러가 뜹니다.. ㅠㅠ 무한 루프가 발생해서 막았다는거 같은데..
List 컴포넌트의 onClick={props.listClick} 자리에 listClick(i)  함수를 두고 싶은거니깐
선생님이 말씀해주신  listClick={ listClick(i) } 으로 바꾸어도 실행이 되어야하는데 이해가 되지않습니다....

listClick={()=>listClick(i)}        원하는대로 실행 됨   (제가 왜 이런 형태로 썼는지도 모르겠습니다.)  
listClick={ listClick(i) }              무한루프 에러가 뜸...  대체 왜...
listClick={ listClick }                  파라미터 전달이 안돼서 원하는 대로 실행이 안됨
listClick={ (i)=>listClick }        원하는 대로 실행이 안됨

어디서 부터 잘못된걸까요...?

아 그리고 props unique key 의 대한 오류는 전부다 뜹니다...  구글 검색 조졌는데... 빠가라... 이해가 ... 설명만 해주시면 감사하겠습니다.

[codingapple]

unique key는 map으로 반복할 때 key속성을 빼먹으면 나옵니다

그렇다면 이해하기 편하게 i도 props로 보내고 listClick도 listClick 이름만 props로 보내는건 어떨까요

[이도현]

그렇다면 이해하기 편하게 i도 props로 보내고 listClick도 listClick 이름만 props로 보내는건 어떨까요

이 말에서 i 를 props로 보낸다.      listClick 이름만 props 로 보낸다.   가 어떤 말씀이실까요..?

List 컴포넌트의 onClick 이하를 수정하라는 말씀이실까요..?

이해를 못해서 코송합니다...

 

[codingapple]

<List listClick={ listClick } i={i} />

이건 어떨까요 

[이도현]

감사합니다.

[글쓴이]

글