본문 바로가기

728x90

useEffect2

[React Native] 함수형 컴포넌트 props 데이터에 따라 업데이트 해주기(Functional Component update on props change) 안녕하세요 Foma 입니다. 오늘은 함수형 컴포넌트에서 props가 바뀔 때마다 화면이 업데이트 되도록 하는 기능을 구현해 보도록 하겠습니다. 바로 시작할게요~ Problem 아래와 같이 추가 버튼을 누르거나 수정 버튼이 눌리면 폼 형식의 모달이 뜨도록 구현 했습니다. 위 과정에서 수정 버튼을 눌렀을 땐 해당 버튼이 눌린 데이터 모델의 값이 인풋 안에 미리 작성돼도록 하고, 추가 버튼이 눌렸을 땐 빈 인풋창이 보이도록 구현하고 싶었습니다. 왼쪽이 추가(+) 버튼을 눌렀을 때, 오른쪽이 수정버튼을 눌렀을 때입니다. TodoList.tsx 위 리스트 화면에서 useState를 구현해 줍니다. const [todos, setTodos] = useState(todoDatas); const [todo, setTo.. 2022. 7. 26.

[React Native] Hooks를 사용해야 하는 이유 (feat. useState,useEffect) 안녕하세요 Foma 입니다! 요즘 React Native를 공부하는데 useState,useEffect가 정말 많이 보이더라구요. 이게 뭔지 그리고 왜 사용해야 하는지 정확히 알고자 이 글을 정리했습니다. 바로 시작할게요~ 언어는 TypeScript, 환경은 Expo로 진행 하겠습니다! Hooks Hooks에 대해 정말 정말 간단하게 설명해 드릴게요. (왜냐하면 useState,useEffect가 모두Hooks이기 떄문이죠.) 기존의 React Native에선 상태 관리와 라이프 사이클을 관리하기 위해서 Class 형태로 코드를 작성해야 했습니다. 이와 같이 Class로 작성하게 되면 코드를 재사용 하기가 힘들고, 라이프 사이클 메서드가 추가 되면서 쓸 데 없이 코드가 길어지는 문제가 있었습니다. 바로 .. 2022. 6. 18.

728x90

티스토리툴바