🎀➡한주 동안 진행한 것들
1.내배캠 정예반 수업
2.React 수업 , 과제 ( Todolist 만들기 )
🎀➡되돌아보기
1.정예반 수업
JS 이용하여 기능 구현 익숙 해지기
-modal , 좋아요 기능 구현하기
2.리액트를 기반으로 Todolist
어려운 개념들이 쏟아진다
리액트 기본 개념
데이터 바인딩이 용이함
js 문법을 그대로 사용할 수 있기 때문에
( 이미지 넣고 싶으면 import 해와서 {} 안에 임포트 해온 이미지 명을 넣어서 사용함 ) style 은 { {object 로 넣음 }}
<.div style={ {color :"blue",fontSize:"30px"} }> </div.>
.Usestate
(데이터 보관 방법 1) 변수에 넣기 2)state에 넣기 )
상단에 ： import Ｒｅａｃｔ{useState} from "react";
ｕｓｅＳｔａｔｅ（”남자코트추천“）；｢a( 실제 데이터 ) ,b (데이터 사용을 위한 함수 ) ｣
let [글제목, 글제목 변경]= useState("남자코트추천");
state란?
1) 변수 대신 쓰는 데이터 저장공간
2)useState()를 이용해 만들어야함
let [title, contents] = useState('강아지는 옳다');
<h3.>{title}</h3.>
->> 강아지는 옳다 가 출력됨
useState(state데이터) = [state데이터, state 데이터변경함수]
★ 웹이 App처럼 동작하게 하기 위하여 사용함
새로고침 없이도 html이 재렌더링됨
리액트 버튼에 이벤트 리스너 ( 핸들러 ) 장착하기
state 변경하기
array,객체 state 수정하는 방법
- 변경 함수 만들기
-대체할 데이터 만들기 (스프레드 문법을 사용해서
1)state 카피본만들기
2)카피본에 수정사항 반영하고
3)변경함수() 넣기
cf) warning 제거하기
/ eslint-disable /
Component : 자주 사용하는 함수를 사용하여 html 을 나만의 태그로 만들 수 있음
function Modal(){
단점 : state를 쓸 때 복잡해짐 - props 문법을 이용해야 함
🎀➡느낀점
왜 내배캠 가장큰 소득은 동기라고 하는지 절실히 느낀다.
아무리 강의를 들어도 머릿속을 스처가는 기분이 들어서, 팀원분께 넉두리를 했더니, 공부 방향성에 대해 조언을 들을 수 있었다. 코드를 이해하고 넘어가야 한다고 생각해서 무조건 이것이 어떤 기능을 하는지, 어떤 프로세스를 보이는지를 알아야 하니 진도가 더디고 좌절감이 많이 느껴젔는데 꼭 모든 코드를 이해하고 넘어가야 하는게 아니라고 하셨다.
우리 팀 에이스 분이 하신 말이라 공부 방향성을 수정 해야 한다는 생각이 들었다. 내가 보기에 너무 잘하고 능숙 해 보이는 분도 때로는 이해가 안되어서 그냥 따라 치면서 익숙해지고 습관화 하기도 한다는것이 좀 위안이 되었다.
🎀➡다음주에 해야 하는것
1.React 개인공부 + 팀프로젝트
2.개인공부 소홀히 하지 않기
