master-class State Management 5.13_Categories 사용자들이 버튼을 이용하여 toDo의 카테고리를 바꿀 수 있게 하는 기능을 추가해보자 onClick을 주자... master-classreact.jsmaster-class State Management 5.12_Refactoring 코드를 분리하는걸 리팩토링이라고 한다. 앞선 ToDoList를 Create ToDo와 TodoList 와 ToDo로 나눠보자 이 때 atom을 이용해야 하는데, atom 에 toDoState를 옮긴다. interface와 함께..export 도 적는다.... master-classreact.jsmaster-class State Management 5.11_ToDoList 위 함수는 빈 베열을 받는다. 아래 함수는 atom 값을 변경할 수 있다. 이렇게 두 개 함수를 따로 쓰는 것 보다 다른 방법으로 useRecoilState 함수로 더 편하게 atom을 받을 수 있다. 이는 useState와 비슷하다. 첫번째 인자는 값 저장, 두번째 인자는 값 변경이 되는 것이다 toDo 리스트를 만들기 위함은 recoil state도 자바스크립트와 같다... master-classreact.jsmaster-class State Management 5.0 _ Dark Mode part One Recoil 전에 state management가 무엇인지 알아보자. 라이트 모드와 다크모드를 바꾸는 스위치를 만들 것이다. Recoil 없이.. 그러면 얼마나 도움되는지 알 수 있겠지 ㅋㅋ!! 직접 경험한다면 해결법을 더 잘 알 수 있다. 왜 state management가 필요한지 알 게 되겠다. 다크모드 라이트모드를 바꿀 때 사용하는 간단한 토글 로직 누를 수 있게 해준다. curren... master-classreact.jsmaster-class State Management 5.8_Form Errors 또 사용할 수 있는 것은 REGULAR EXPRESSION이다. 이걸로 코드에다가 나의 문자열이 어떤 종류인지 알 수 있다. 뒤는 naver.com을 포함하겠다는 것이다. 위는 조건이다. 이 모든 것을 정규식을 통해 사용할 수 있다. 정규식 조건을 통과한 문자열만 가능하다. Pattern 이라는 것을 이용해 정규식을 사용한다. 에러 타입은 다양하다. 메세지를 스팬에 넣어보자. 타입은 항상 바... master-classreact.jsmaster-class State Management 5.4_ Recap app에서도 chart에서도 atom의 값을 받아올 수 있다 header 에서 atom값을 받아서 수정할 수 있다. 매개변수로 atom을 받고 atom을 변경하는 함수이다. react의 setState와 같게 동작한다. 이전 값을 바꿔주도록 하였다. 아주 멋진 방법이다. 나의 컴포넌트가 atom값을 관찰하기 시작하면, atom이 변경되면 다른 컴포넌트들도 리렌더링 된다. 하나의 atom을 만... master-classreact.jsmaster-class
State Management 5.13_Categories 사용자들이 버튼을 이용하여 toDo의 카테고리를 바꿀 수 있게 하는 기능을 추가해보자 onClick을 주자... master-classreact.jsmaster-class State Management 5.12_Refactoring 코드를 분리하는걸 리팩토링이라고 한다. 앞선 ToDoList를 Create ToDo와 TodoList 와 ToDo로 나눠보자 이 때 atom을 이용해야 하는데, atom 에 toDoState를 옮긴다. interface와 함께..export 도 적는다.... master-classreact.jsmaster-class State Management 5.11_ToDoList 위 함수는 빈 베열을 받는다. 아래 함수는 atom 값을 변경할 수 있다. 이렇게 두 개 함수를 따로 쓰는 것 보다 다른 방법으로 useRecoilState 함수로 더 편하게 atom을 받을 수 있다. 이는 useState와 비슷하다. 첫번째 인자는 값 저장, 두번째 인자는 값 변경이 되는 것이다 toDo 리스트를 만들기 위함은 recoil state도 자바스크립트와 같다... master-classreact.jsmaster-class State Management 5.0 _ Dark Mode part One Recoil 전에 state management가 무엇인지 알아보자. 라이트 모드와 다크모드를 바꾸는 스위치를 만들 것이다. Recoil 없이.. 그러면 얼마나 도움되는지 알 수 있겠지 ㅋㅋ!! 직접 경험한다면 해결법을 더 잘 알 수 있다. 왜 state management가 필요한지 알 게 되겠다. 다크모드 라이트모드를 바꿀 때 사용하는 간단한 토글 로직 누를 수 있게 해준다. curren... master-classreact.jsmaster-class State Management 5.8_Form Errors 또 사용할 수 있는 것은 REGULAR EXPRESSION이다. 이걸로 코드에다가 나의 문자열이 어떤 종류인지 알 수 있다. 뒤는 naver.com을 포함하겠다는 것이다. 위는 조건이다. 이 모든 것을 정규식을 통해 사용할 수 있다. 정규식 조건을 통과한 문자열만 가능하다. Pattern 이라는 것을 이용해 정규식을 사용한다. 에러 타입은 다양하다. 메세지를 스팬에 넣어보자. 타입은 항상 바... master-classreact.jsmaster-class State Management 5.4_ Recap app에서도 chart에서도 atom의 값을 받아올 수 있다 header 에서 atom값을 받아서 수정할 수 있다. 매개변수로 atom을 받고 atom을 변경하는 함수이다. react의 setState와 같게 동작한다. 이전 값을 바꿔주도록 하였다. 아주 멋진 방법이다. 나의 컴포넌트가 atom값을 관찰하기 시작하면, atom이 변경되면 다른 컴포넌트들도 리렌더링 된다. 하나의 atom을 만... master-classreact.jsmaster-class