[React Native] 버튼을 눌렀을 때 특정 값을 함수로 보내는 방법

 

이 방법을 찾기 위해

무수히 많은 코드를 참고 했고요...?

리액트도 잘 모르는 지라 props, useState, useEffect 다 너무 낯설어서

진짜 머리 뽀개지는 줄 알았음

 

거의 한 2~3일을 여기 매달린 것 같은데

정말 우연히 찾은 포스트에서 답을 찾았다ㅠㅠ

 

우선 출처 먼저!

How to bind onPress with an argument in React Native? - The Web Dev

 

아마 검색할 때 표현이 잘 못 됐던 것 같음ㅎㅎ..

 

무튼 내가 원했던 건

 

월화수목금, 각 요일을 나타내는 버튼이 있고

하나의 버튼을 누르면 그 요일을 가리키는 정보가 넘어가서

해당 요일의 스케쥴을 타임라인 컴포넌트를 써서 쫙! 보여주는 거였음

 

근데 한 번에 할 순 없으니까 일단

1. 버튼을 눌렀을 때

2. 버튼에 연결 된 특정 정보가 넘어간다

 

이걸 너무 하고 싶었음 ㅠㅠ

 

그래서 참고 했던 다른 코드는

https://snack.expo.dev/@mmemmo/a7c486?platform=android 

spunky pudding - Snack

 

이거

근데 데이터를 담아서 보낼 때 한박자씩 늦어서

button이나 touchableOpacity를 눌렀을 때

이 전에 받은 정보가 떴었음 ㅠㅠ

 

그래서 새로! 검색했다가 찾은 게 맨 위의 링크

 

 

현재 코드는

function TimeLine({ navigation }) {
  const printDay = (arg) => () => {
    console.log(arg);
  };
  const data = [
    { time: "09:00", title: "보안 상의 이유로 삭제" },
  ];

  return (
    <View style={{ flex: 1 }}>
      <View
        style={{
          height: "10%",
          flexDirection: "row",
          justifyContent: "center",
        }}
      >
        <TouchableOpacity style={styles.button} onPress={printDay("monday")}>
          <Text>월요일</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={printDay("tueseday")}>
          <Text>화요일</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={printDay("wednesday")}>
          <Text>수요일</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={printDay("thursday")}>
          <Text>목요일</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={printDay("friday")}>
          <Text>금요일</Text>
        </TouchableOpacity>
      </View>
      <View style={{ flex: 4, backgroundColor: "cornflowerblue" }}>
        {/* <TimeLineItem /> */}
        <Text>타임라인이 나오는 자리입니다</Text>
        <Timeline style={styles.list} data={data} />
      </View>
    </View>
  );
}

export default TimeLine;

 

이제 버튼을 누르면(onPress 이벤트 발동)

printDay라는 함수에 각 요일별 정보를 담아서 보내게 되고

그러면 함수가 실행 돼서 터미널에 보낸 값(argument)가 찍힌다!

 

 

이제 단순히 프린트가 아니라

이 값으로 css 스타일을 바꾸고 (선택한 버튼 색은 바뀌어야 하니까)

해당 요일에 대한 정보를 요청할 수 있도록 해봐야겠다 ㅎㅎ