React-native 개별 선택 만들기

리액트 네이티브를 쓰면서 참 많은 것을 알게 된다.
첫번째 너무 어렵다. 두번째 뭐만 하면 에러가 발생한다. 세번째 귀찮은 작업들이 있다.
네번째 내가 쓰려는 대부분의 태그들은 라이브러리다.
마지막으로 드는 생각은 앱개발은 진짜 너무 하기 싫다. 하지만 그래도 의지의 한국인이니까 해보는 데 까지 해보자는 게 내 신념이다.

일단 API 문서를 통해 이미지를 GET 요쳥으로 받아왔다.

const bodyGetData = async () => {
    let body = [];
    try {
      let config = {
        method: "get",
        url:
          "http://everyweardev-env.eba-azpdvh2m.ap-northeast-2.elasticbeanstalk.com/api/v1/user/bodyType/male",
        headers: {},
      };

      axios(config).then(function (response) {
        response.data.data.map((u) => {
          switch (u.bodyType) {
            case "standard":
              body.push({ bodyType: "스탠다드", imgUrl: u.imgUrl, key: 1 });
              break;
            case "reverseTriangle":
              body.push({ bodyType: "역삼각형", imgUrl: u.imgUrl, key: 2 });
              break;
            case "triangle":
              body.push({ bodyType: "삼각형", imgUrl: u.imgUrl, key: 3 });
              break;
            case "circle":
              body.push({ bodyType: "원형", imgUrl: u.imgUrl, key: 4 });
              break;
            case "hourglass":
              body.push({ bodyType: "직사각형", imgUrl: u.imgUrl, key: 5 });
              break;
          }
        });
        return setBodyType(body);
      });
    } catch (err) {
      console.log(err);
    }
  };

그러고 나서 위의 데이터들을 map() 메소드를 통해 나열해줬고 그 나열한 아이템들을 하나씩 클릭하게 만들고 싶다. 그런데 나의 돌덩어리 같은 머리는 어찌할바를 몰랐기에 스택오버플로우에 질문을 올렸다. 답변이 왔다.
thank you Ahmed Gaber!!😀😀
대단한 분 덕분에 풀 수있었는데 이분이 레퍼런스를 알려줬다 아래 코드를 보고 해보라고

 //define state to save selected value inside it
 const [selected, setSelected] = React.useState();
 
//handle item onPress
 const onPress = (item) => {
      setSelected(item);
  }
//check if item selected
 const isSelected = (item) => {
      return selected?.unique_id === item.unique_id;
  }
 //and in render function
  <ScrollView>
     {
        data.map((item, index) => {
            return(
              <ItemComponent
                onPress={() => setSelected(item)}
                style={isSelected(item) ? selectedStyle : defaultStyle}>
              
              </ItemComponent>
            )
        })
     }
  </ScrollView>
      

그리고 이분께서는 링크를 하나 주셨다.
full code 이거보고 확인해 보라고 너무너무 감사합니다ㅜㅜ

그래서 올려주신 코드 보고 작성을 해보았다.

const Select = ({ navigation }) => {
  let bouncyCheckboxRef = null;
  const [bodyType, setBodyType] = useState([]);
  const [standardSelected, setStandardSelected] = useState(false);

  const [selectBodyType, setSelectType] = useState();
  const bodyGetData = async () => {
    let body = [];
    try {
      let config = {
        method: "get",
        url:
          "http://everyweardev-env.eba-azpdvh2m.ap-northeast-2.elasticbeanstalk.com/api/v1/user/bodyType/male",
        headers: {},
      };

      axios(config).then(function (response) {
        response.data.data.map((u) => {
          switch (u.bodyType) {
            case "standard":
              body.push({ bodyType: "스탠다드", imgUrl: u.imgUrl, key: 1 });
              break;
            case "reverseTriangle":
              body.push({ bodyType: "역삼각형", imgUrl: u.imgUrl, key: 2 });
              break;
            case "triangle":
              body.push({ bodyType: "삼각형", imgUrl: u.imgUrl, key: 3 });
              break;
            case "circle":
              body.push({ bodyType: "원형", imgUrl: u.imgUrl, key: 4 });
              break;
            case "hourglass":
              body.push({ bodyType: "직사각형", imgUrl: u.imgUrl, key: 5 });
              break;
          }
        });
        return setBodyType(body);
      });
    } catch (err) {
      console.log(err);
    }
  };
  useEffect(() => {
    const unsubscribe = navigation.addListener("focus", () => {
      bodyGetData();
    });
    return unsubscribe;
  }, [navigation]);

  const onPress = (item) => {
    setSelectType(item);
  };
  const isSelected = (item) => {
    return selectBodyType?.key === item.key;
  };

  return (
    <View style={styles.container}>
      <Text
        style={{ fontSize: wp("5.5%"), fontWeight: "bold", marginBottom: 21 }}
      >
        자신의 체형을 선택해 주세요
      </Text>
      <View style={{ flexDirection: "row", marginBottom: hp("10%") }}>
        <Text style={{ fontSize: wp("4.5%"), marginRight: wp("1%") }}>
          더 정확한 평가를 받으실 수 있습니다
        </Text>
        <Image
          source={require("../../images/smile.png")}
          style={{ marginTop: hp("0.5%") }}
        />
      </View>
      <ScrollView horizontal={true} showsHorizontalScrollIndicator={true}>
        {bodyType.map((data) => (
          <>
            <TouchableHighlight
              underlayColor="gray"
              style={{
                marginLeft: 16,
                marginRight: 16,
                width: wp("70%"),
                height: hp("35%"),
                alignItems: "center",
                borderRadius: 30,
                backgroundColor: isSelected(data) ? "grey" : "#ffffff",
                shadowColor: "#000",
                shadowOffset: {
                  width: 0,
                  height: 3,
                },
                shadowOpacity: 0.25,
                shadowRadius: 3.84,
                elevation: 5,
              }}
              value={data.bodyType}
              key={data.key}
              onPress={() => {
                setSelectType(data);
              }}
            >
              <>
                <SvgCssUri
                  uri={data.imgUrl}
                  width="90%"
                  height="60%"
                  marginTop="5%"
                  key={data.key}
                />
                <Text style={styles.bodytype}>{data.bodyType}</Text>
              </>
            </TouchableHighlight>
          </>
        ))}
      </ScrollView>
      <TouchableHighlight
        style={styles.button}
        onPress={() => {
          navigation.navigate("얼굴형 정보 입력");
        }}
        underlayColor="gray"
      >
        <>
          <Text style={styles.text}>선택 완료</Text>
        </>
      </TouchableHighlight>
    </View>
  );
};

결과는 성공이다. 바로 내가 원하던 모습이었다. 이 감격스러움.... 해냈다는 생각에 기분이 좋았지만 다른 문제가 있었으니...

그것은 navigation을 통해 params를 전달하고 받아와야 하는데 받아와지지않는다....
이거는 해결하면 다음에 다시 올려보도록 하겠다