[React] props - 자식이 부모 state 쓰고 싶을 때
App 컴포넌트(부모) 안에 Modal 컴포넌트(자식) 있는 것 * state 만드는곳은 컴포넌트들중 최상위 컴포넌트에 만들어야 됨 (보통 App.js) 부모→자식 state 전송시 props 문법 props 전송은 자식→부모는 불가능 props 전송은 옆집 컴포넌트도 불가능 부모가 자식에게 주는 것만 가능!!! 1. 부모 컴포넌트에 자식컴포넌트 태그 안에 작명={state이름} *작명은 보통 state이름 이랑 똑같이 함 2. 자식 컴포넌트에 props 파라미터 등록 후 props.작명 const 자식컴포넌트 =(props)=>{ return {props.작명} }
[React] map 함수 - 똑같이 생긴 div 반복문써서 코드 줄이기
★ map( )의 3가지 기능 ★ 1. array의 요소 개수만큼 코드 실행 2. array의 요소 꺼내기 3. array의 요소 갯수만큼 자료 담기 1. array 요소 갯수 만큼 코드 실행 [1,2,3].map(function(){ console.log(1); }) 배열의 요소가 3개 이므로console.log(1)이 3번 실행 2. 함수안에 파라미터 넣어서 array의 요소 꺼내기 [1,2,3].map(function(a){ console.log(a); }) //화살표 함수 [1,2,3].map(a => console.log(a)) array의 요소인 1,2,3 이 출력 3. array에 요소 개수만큼 자료 담기 return 뒤에 작성한 코드는 array 안의 요소 개수만큼 반복 실행됨 [1,2,3..
[React] 동적인 UI 만들기 - 모달창 + 삼항연산자
동적인 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..
[React] 데이터가 array, object 인 경우 복제, 일부 수정하기(state 변경함수)
자료가 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]은 미지의 장소에 저장되어있고 어레이..
[React] 버튼에 기능 개발을 하기(리액트 state 변경하는 법)
터미널에 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에 담기
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 변경 도와줌