일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- TypeScript
- crud
- SSA
- wetube
- react
- merge
- socket io
- async
- 중급파이썬
- git
- MongoDB
- S3
- NeXT
- docker
- SAA
- 튜플
- 채팅
- 카톡
- Props
- AWS
- Vue
- lambda
- flask
- dict
- pandas
- node
- RDS
- Class
- 파이썬
- EC2
- Today
- Total
목록JSX (2)
초보 개발자

간단한 TO DO LIST를 만들어 보려고한다. 전에 vanilaJS로 만들어 본 적이 있었는데 일일이 eventListener를 넣어주거나 화면을 새로고침해주거나 하는식으로 하였는데 이젠 React의 setState()기능으로 좀 더 수월하게 진행할 수 있을 것 같다. 일단 전체적인 코드는 이러하다. 화면은 아래와 같다 먼저 ustState를 사용하여 List와 todo state를 만들어주었다. string인 todo를 array인 list안에 집어 넣고 그 list를 출력하려고 하기 때문이다. onChange는 input에 타이핑이 될 때마다 setTodo를하여 todo state를 업데이트 하는 것이다. 타이핑이 끝나면 이제 엔터를 치던 버튼을 누르면 전송을 해야하는데 이때 onSubmit을 사용..

react를 왜 배워야하는지 어떨 때 써야하는지에 대해서 모른다면 사용법을 무작정 외우는 수 밖에 없다. 이번에 간단하게 어떤 차이가 있는지 알아보고 가겠다. react element를 직접 만들어 보는 방식으로 원리를 이해하고, 어려운 방식으로 먼저해봐야 나중에 쉬운 방식으로 했을 때 편한지를 알 수 있었다. 먼저 비슷한 기능을 만들어보려고한다 VanilaJS 먼저 버튼을 클릭하면 화면의 숫자가 하나씩 증가하는 것을 나타내려고 하였다. 데이터가 바뀌어도 html은 새로고침이 되지 않는다. 따라서 화면에 그 숫자가 자동으로 반영되지 않는다. 이를 해결하기 위해서 eventlistener에 들어가는 함수에 그 표시하는 값을 바꿔주는 식을 적어주어야함. 그리고 많은 양의 코드가 필요 ( eventlisten..