내가 보려고 쓰는 기록

동적인 UI 만드는 step 1. 컴포넌트에 html css로 미리 디자인 완성 1 2 지도 열기 cs 2. UI의 현재 상태를 state로 저장 (닫혀있을때 false 열릴때 true로 할 것) 1 2 let [map,setMap] = useState(false); cs 1 2 3 { setMap(!map); }}>지도 열기 cs 3. state에 따라 UI가 어떻게 보일지 작성-삼항연산자 조건문으로 1 2 3 { map==true? : null } cs *null 비어있는 html용으로 자주 사용 map state가 true면 컴포넌트 열어주세요~ false면 숨겨주세요~ 💨 state가 스위치, 삼항연산자가 기계 삼항연산자 조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드 1..

모달창으로 상세페이지 만들기 Q. 어떤걸 컴포넌트로 만들면 좋은가 1. 반복적인 html 축약할때 ( 계속 똑같은 UI 필요할 때) 2. 큰 페이지들 3. 자주 변경되는 것들 컴포넌트의 단점: state 가져다쓸 때 문제생김 (A함수에 있던 변수는 B함수에서 맘대로 가져다 쓸 수 없음)

자료가 array/object 인 경우 state 변경함수 쓸때 주의점 useState에 보관된 값이 array이고 array 안의 일부 값만 수정하고 싶다면? 원본은 수정하지말고 보존하고 원본 카피본 만들어서 수정 ▪ 카피본 만들때는 array를 [...array] 로 변수에 저장해야됨 (*spread 연산자) ▪ 카피본 만들고 원하는 부분 수정해서 변경함수에 적용 1 2 3 4 let copy = [...글제목] copy[0]='여자코트 추천' 글제목변경(copy); cs Q.왜 [...]이렇게 카피본 만들어야 됨? [array/object 특징] 기존 state가 array나 object 데이터이면? 변수인 어레이에 [1,2,3]이 들어가는게 아니라 [1,2,3]은 미지의 장소에 저장되어있고 어레이..

터미널에 wraning 메세지 많이 뜸 -> 없애려면 맨위에 /* eslint-disable */ 작성 ● 좋아요 버튼 누르면 숫자 +1 되는 기능 숫자부분은 바뀌는 부분이므로 state로 만들기 " let [작명1,작명2] = useState(보관할 자료); " 작명1 : 보관한 자료부르는 함수 / html에 넣을때 {작명1} 작명2 : state 변경함수 / html에 넣을때 {작명2(변경할값)} let [좋아요,좋아요변경] = useState(0); {글제목[0]}👍{좋아요} {/* 좋아요 버튼 만들기 */} 2월 17일 발행 html 요소 클릭했을때 코드 실행하기 onClick 함수 onClick={ } 안에 함수 넣어야함 *함수란? 긴 코드를 한 단어로 묶어주는 문법 함수 만드는 문법 onCli..

react에서는 데이터 저장할 때 state 씀 Q. 왜 굳이 state 써야함? 보관한 자료가 갑자기 변경되면 변수에 담은 자료는 html에 재렌더링 안됨 state는 변경되면 자동 재렌더링됨 ▶▶자주 변경될것같은 html 부분은 state로 만들어 놓기 state 만드는 법 1. return() 밖에서 userState 엔터치면 import useState 생성됨 2.useState(보관할 자료) 3.보관한자료 사용하려면 let[작명1,작명2]에 넣기 *작명할때 직관적인게 좋음 작명1 ▶ useState에 보관했던 자료 나옴 작명2 ▶ state 변경 도와주는 함수 글제목(작명1) ▶ 중괄호에 넣으면 보관했던 자료 나옴 b(작명2) ▶ state 변경 도와줌

js에서도 html 잘 동작하는 이유는? JSX 언어라서! (js안에서 html 쉽게 작성할 수 있음) JSX문법1. class 넣을 땐 className (js안에서 class는 문법이 따로 있음) JSX문법2. 변수넣을땐 데이터바인딩 {중괄호} id={}, className={} 모두 가능 😎데이터 바인딩이란? 서버에서 데이터 가져와서 사이에 넣어주세요~ ---> 프론트엔드 개발자가 제일 많이 하는 것 포트폴리오 JSX문법3. style 넣을 땐 중괄호 안에 object 형식으로 작성해야 됨 style={ { 스타일명 : '값' }} {post}

html 글,그림 css 디자인 js 기능 Library 남이 작성한 코드(가져다 쓰면 코딩 편해짐) node js 자바스크립트 실행 도우미 npm js 라이브러리 관리 도와주는 패키지 매니저, 라이브러리 쉽게 설치, 수정, 삭제 가능 ex) npm update 라이브러리명, npm install 라이브러리명 webpack js 라이브러리 용량 줄여줌

if 대신 switch 문법 쓸 수 있음 switch(변수){ 변수가 3이면 이거 실행해주세요 변수가 4이면 이거 실행해주세요 } let 변수 = 2+2; switch(변수){ case 3: alert('변수가 3이네요'); break case 4: alert('변수가 4이네요'); break default: alert('아무것도 해당안됨') } case - if와 비슷 breack - switch문 중지해주세요 default - else와 비슷 if는 다양한 조건식 가능 switch는 변수 1개만 테스트 가능, 코드 깔끔, 변수 하나만 검사할 때 간편하게 사용 가능