react6 동적인 UI 만들기 (모달창만들기) 동적인 UI 만드는 step 3단계(이걸 기억하고 동적인 상태 변화 줄때마다 활용) 1. html css로 미리 디자인 완성 2. UI의 현재 상태를 state로 저장 let [ 변수, set변수] = useState(); ▼형식은 자유/모달창 상태 표현만 가능하면 됨. -e.g.) let [modal, setModal] = useState(false); 3. state에 따라 UI가 어떻게 보일지 작성 (조건문 사용) JS를 써야하니 {}열고 대신 html 이므로 JS if 문, for 반복문 사용 불가 =>조건문은 삼항연산자 사용(ternary operator) - 조건식 ? 참일때 실행할 코드 : 거짓일 때 실행할 코드 -e.g.) { modal == true ? : '' 또는 null } =>참일.. 2023. 3. 14. 컴포넌트 만들기 상세페이지 기능! => 페이지 완전 변환이 아닌 같은 페이지 내 상세페이지(실은 모달창) 만 백만개쯤 작성함 이걸 깔끔하게 줄여주는게 : 컴포넌트(이렇게 한단어로 축약한것) 1-1. function 만들기 -다른 함수 바깥에 + function 이름은 영어대문자로 시작 -e.g.)function Modal(){} 1-2. return() 안에 html 담기 -return안에는 항상 하나의 태그만 (태그 병렬 no, 그대신 그 하나의 태그안에 다른 태그 담는건 가능) function Modal(){ return( 제목 날짜 상세내용 ) } 1-3. 쓰기 -원래 사용하려던 태그 안에 이렇게 넣어줌 2. let Modal = () => { return( ) } *이걸 const Modal = () => {}로.. 2023. 3. 4. State 변경 함수 특징과 reference data type 과제)홈페이지에 '남자 코트 추천' 이라고 나온 부분을 '여자 코트 추천'으로 바꾸는 버튼 만들기 과제 풀이) let [글제목, 글제목변경] =useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학']); 방법1) { 글제목변경(['여자 코트 추천', '강남 우동 맛집', '파이썬 독학']); }}>글수정 --->비효율적, [] 안에 100개 있으면 100개 다써야 방법2) { 글제목[0]='여자 코트 추천'; //array안에 있던 데이터를 변경하라는 뜻 //변수에 있던 화살표는 수정 안됨(글제목이라는 변수 변경 x) 글제목변경(글제목); }}>글수정 ---> array/object 다룰 때 원본은 보존하는게 좋음 방법2) 사용할 경우 원본 영원히 수정됨. 방법3) { let cop.. 2023. 3. 3. JS 함수 작성 및 State문법 terminal에 뜨는 error: 에러는 반드시 해결! warning: 무시가능 /*eslint-disable*/ 쓰면 warning 메시지 안띄워줌 onClick={ 이 안에는 직접적인 JS 기능을 써주는건 x. 함수 이름을 넣어줌} 그 함수는 따로 function 함수(){} 이렇게 써주고 이안에 기능을 코딩함. onClick={function(){}} 써줘도 됨. ={ () => {} } 이걸 주로 씀. state 변경하는 법 1. 등호로 변경 금지 2. useState로 가서 let[변수이름, state변경함수] 부분에 'state변경함수'를 설정 e.g.){글제목[0]} {따봉변경(따봉++)}}>👍 {따봉} 2023. 3. 2. 변경이 잦을 경우) 일반 변수 대신 state 문법! return() 안에는 병렬로 태그 2개 이상 기입금지 state 만드는 법 1.import{useState} 2.useState(보관할 자료) 3.let[작명, 작명] e.g.)let [ a,b] = useState('4세대'); * a : state에 보관했던 자료 b : state 변경 도와주는 함수 let [글제목,b] = useState('여자 코트 추천'); // = ['남자 코트 추천', 함수] 이렇게 써있는거랑 같다. //destructing 문법 //let num =[1,2]; // let a = num[0]; // let c = num[1]; //let [a, c] = [1, 2]; 위에 처럼쓸걸 왼쪽처럼 한줄로 간단히 쓸수 있음. **새로운 문법 배웠으면 언제 쓸지도 생각 해보기! Q.. 2023. 3. 1. react 입문과 기본 문법 react는 JS 라이브러리다 JS 공부가 기본이 되고 그 위에 쌓아가면 되는건데 마침 지금 jquery를 공부하는 중이라 오랜만에 html, css, js를 만지작 거리고 있어서 시작하기 좋은 시기인것 같다. react는 굳이 새로고침을 안하는 싱글 페이지를 어플을 만드는데 많은 도움이 된다고 한다. 그리고 당연한 얘기겠지만 JS 라이브러리니까 html 사용하는데 있어서 도움이 된다. [기본중의 기본] 미리보기 띄우기 : Terminal>New Terminal > npm start [JSX] JSX : .js 파일에서 html 작성할때 쓰는 문법/언어다. JSX 문법 1. class 넣을 땐 className class 문법이 따로 있는데 그거랑 겹쳐서 html의 class 용도로 쓸땐 classNam.. 2023. 2. 20. 이전 1 다음