728x90 반응형 React Native12 [RN] 투두리스트 코드챌린지 1) Travel 페이지에서 앱을 끄면 다시 시작할때도 Travel 페이지에서 시작하고 Work 페이지에서 앱을 끄면 다시 시작할 때도 Work 페이지에서 앱을 시작할 수 있게 구현해보자! 현재 state를 저장해주는 saveState함수를 만들어서 여기에 현재 state를 AsyncStorage에 넣을 것이다. 계속 state가 변하면 덮어씌워지면서 결국 마지막 state만 Async Storage에 남을것! working 변수에 현재 state가 있으므로 working 변수를 saveState 함수에 props로 담아준다. loadToDos를 통해 마지막 state를 parse해서 setWorking 모듈러에 넣어준다! 그러면 마지막 state를 기억할거다!! 2) 투두에 완료 기능 넣기 3) 투두에.. 2022. 5. 21. [RN] 투두 리스트를 만들어보자! (2) Persist work와 travel의 투두리스트가 달라야 하는데 지금 똑같이 보인다. 우선 toDo를 저장하는 Object에서 work:working을 그냥 working으로만 바꾼다 여기서 working은 useState변수 였다! 내가 만약 work에 해당하는 투두 리스트를 쓴다면 work에 해당하는 Touchable에서 work함수를 호출하고 setWorking이 true가 된다. work에 해당하는 toDo를 입력해주면 toDo 객체에 현재 working 상태가 들어가는데 toDo의 working 상태와 현재의 working의 상태가 같을때만 View를 띄우고 그게 아니면 null을 반환한다 예를 들어 현재 working이 true이면 work 투두리스트만 보여주는 거고 working이 fals.. 2022. 5. 21. [RN] 투두 리스트를 만들어보자!(1) 유저가 submit 버튼 누르는걸 감지하도록 만들어볼거다. 이때 사용하는 props가 onSubmitEditing이다. 버튼이 눌렸다면 addToDo 함수가 실행될거고 이때 text가 비어있으면 리턴해주고 그게 아니라면 setText를 통해 todo를 save해줄것이다. 이제 toDos를 담아놓기 위해 useState를 만들어줄 것인데 Object로 만들어줄 것이다. hashMap처럼! toDo 리스트를 쓰다보면 이전 toDos와 새로운 toDo를 합쳐야 할 때가 생기는데 이때 사용하는 것이 object Assign이다! object Assign object을 가져다가 다른 object와 합쳐준다. 그런다음 새로운 object를 리턴한다. 약간 js에서 스프레드 연산자 생각하면 될듯하다. Object.a.. 2022. 5. 21. [RN] TextInput useState를 만들어주고 누군가 work text를 누르면 work 함수를 호출하고, travel text를 누르면 travel함수를 호출해준다. 이때 사용되는 props가 onPress이다! 스프레드 연산자를 통해 button text의 모든 style을 가져온다. 그리고 내가 요소를 추가한다면 ...을 통해 요소 추가도 가능하다. 위에 사진은 스프레드 연산자를 통해 color라는 요소를 추가한 것이다! 참고로 styles에는 color와 관련된 속성이 없다. 만약 working한다면 color를 white로 working이 false면 grey를 칠해준다. travel의 경우 반대로 설정해주면 된다! text Input RN은 HTML,CSS처럼 text area가 없다. 대신 text Input.. 2022. 5. 21. 이전 1 2 3 다음 728x90 반응형
