🌞 12/30 내배캠 React 43일차

React Native

React Native로 Todo만들기

오늘은 React Native를 활용하여 Todo를 만들어 보았다.

처음에

이러한 형태의 ui를 만들었다.

작업을 진행하며 처음 봤던 것들

• View
• SafeAreaView
• StatusBar
• Flex : n (style)
• etc…

기존 react랑 비슷하면서도 다른 것들이 많았다

공식문서 참고 : https://reactnative.dev/docs/components-and-apis

첫번째 난관 CSS…

ui에 맞춰 html 코드를 작성 후

style sheet를 이용하여 css작업을 하고 있었지만, 조금씩 다른 형태에 css구조 잡기도 애를 먹었다.

const styles = StyleSheet.create({
  safearea: {
    flex: 1,
  },
  container: {
    flex: 1,
    paddingVertical: 30,
    paddingHorizontal: 20,
  },

  Nav: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  NavBox: {
    backgroundColor: "#56b9f3",
    paddingHorizontal: 10,
    paddingVertical: 15,
    width: "30%",
    justifyContent: "center",
  },
  NavBoxText: {
    fontSize: 15,
    textAlign: "center",
  },

flex : n 를 설정해주지 않으면 컨텐츠 들이 소위 말해 찌부(?)가 된다.

flex는 크기를 비율로 설정하는 것이다.

react native는 기본적으로 vertical 형식으로 나열되기 때문에

flex는 세로 축의 비율을 나타내는 것이다.

예로

flex:1 , flex: 2, flex: 1 이라는 세가지 테그가 있다면

화면에는

이런식으로 나타날 것이다.

style sheet에서의 삼항 연산자 사용하기

<TouchableOpacity
            onPress={() => setCategory("js")}
            style={{
              ...styles.NavBox,
              backgroundColor: category === "js" ? "#56b9f3" : "grey",
            }}
          >

이렇게 세개의 버튼이 있을 때, 각 버튼이 클릭 되었을 때, backgroun-color를 회색에서 파란색으로 변경하고 싶다면, style값 내에서도 삼항 연산자를 사용할 수 있다.

const [category,setCategory] = useSate("js")
//
backgroundColor: category === "js" ? "#56b9f3" : "grey",

기존에 설정해 놓았던 category라는 state값이 “js”라면 파란색으로 바꾸고, 아니라면 회색으로 표시하라

⇒ 삼항연산자는 언제든지 쓰일 수 있기 때문에, state값이나 여러 hocks들을 사용할 때 삼항연산자로 해결할 수 있는 문제가 맞는지 어떻게 사용하면 될지 넓은시야로 바라보기 !!

Findindex : 배열요소에서 일치하는 값 중 제일 먼저 발견된 값의 인덱스를 반환한다.

*여기서 find라는 함수는 무엇일까?

Find : 배욜요소에서 일치하는 값 중 가장 처음 값!! 을 반환하는것

index : index…

find+index = 배열 요소에서 일치하는 값중 가장 처음 찾은 값의 인덱스 !! 번호를 반환하는 것!!

 

Todo 만드는데 이게 어디서 쓰이는 것이냐면

 

여기의 Todo 컨텐츠에 ikon이 클릭 됐을 때, todos의 데이터값인 isDone을

토글링 하기 위해 findIndex를 사용하여 그 해당 index값을 가져왔다.

클릭한 todo의 id값과 매개변수 id값이 같다면 그 todo의 index번호를 가져와

그 인덱스의 isDone값을 !isDone값으로 변환하고 그 값을 setTodos에 넣는다.

//setDone
  //완료된 것들은 todo.text를 밑줄긋기
  const setDone = (id) => {
    // 1.id를 매개변수로 받는다.
    // 2. id에 해당하는 요소를 찾는다.
    // 3. 그 배열의 요소의 isDone 값을 토글링한 후에 setTods.
    const newTodos = [...todos];
    const idx = newTodos.findIndex(todo => todo.id === id);
    newTodos[idx].isDone = !newTodos[idx].isDone;
    setTodos(newTodos) 
  }