리액트

냅다 함수 :: React로 투두리스트 만들기 (ft.preventDefault)

이번에 외운 함수는 리액트로 만든 투두리스트입니다. 기능 - input 창에 글자를 입력하면 onChange된 내용을 감지한다. - add 버튼을 누르면 toDos 배열에 저장되고 저장된 개수를 h1에서 확인할 수 있다. 코드 냅다 외우고 써보기 참고로 녹화를 끝내고 실행해봤더니 length에 오타가 있어서 실행이 안됐다... 오타 조심 정리 Event.preventDefault() 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다. 라고 하는데 읽어도 동작하는 방법이 이해되지 않는다. 예제에서 쓰인 이유는 form 태그 안에서 type이 'submit'인데 실행하게 되면 창이 새로고침이 된다. 그때 preventDefault ()..

[React] return할 때 unique key가 필요한 이유

💥 문제 발생 export default function Category({category}) { return ( /* 생략 */ {category.map( (category, i) => { return ( {category}); })} /* 생략 */ ) } Warning: Each child in a list should have a unique "key" prop. return 값에서 map을 사용해 return 값을 주었는데 실행은 되지만 warning 메시지가 떴다. Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 ..

리액트 스터디 시작하기

혼자서 하는것보다 스터디로 하면 좋겠다고 생각하던 때 운 좋게 스터디에 들어가게 되었다. (전부 초면인 분들) 팀장님이 만들어준 스케쥴을 따라가는식인데 그 따라가는 과정부터 전에 못해본 것들을 해보고있다. 스터디하면서 공부 외에 알게 된 것 1. 개인 Repository 올리고 fork하기 2. 공부내용은 ReadMe에 정리하기 3. Github에서 Projects와 Discussions 사용 Projects : 일정 공유하기에 좋다. Discussions : 공부관련으로 질문을 주고받기 유용하다. 앞으로 공부계획 책과 노마드코더의 React 강의로 학원 진도 전에 리액트 해보기!