동적인 UI 만드는 step(props 사용방법까지 써놈)
2022. 4. 26. 23:20
리액트
1.html css 미리 디자인완성 2.UI 현재 상태를 state로 저장 3.state에 따라 ui가 어떻게 보일지 작성 function App() { let [글제목, set글제목] = useState(['남자 코트 추천', '강남 우동 맛집', '수지 모밀 맛집']) let [따봉, set따봉] = useState([0, 0, 0]) let [modal, setModal] = useState('false'); { 글제목.map((a, i) => { return ( setModal(!modal)}> {글제목[i]} { let copy = [...따봉]; copy[i] = copy[i] + 1; set따봉(copy) }}>👍 {따봉} 2월 17일 발행 ) }) } map함수 써서 배열에 있는 값의 개수..
컴포넌트 만드는법
2022. 4. 26. 22:59
리액트
HTML 특징 더러움 그래서 컴포넌트로할꺼임 컴포넌트 만드는법 3step 1.function 만들고 2.return() 안에 html 담기 function Modal(props) { return ( {props.글제목[0]} 날짜 상세내용 { let copy = 글제목; copy[0] = '여자코트 추천' set글제목(copy) }}>{props.set글제목(copy)} ) } 3.쓰기 함수는 다른 function 바깥에 만들어야됌 ㅇㅋ? 여타 다른팁 1.retrun ()안에는 태그 하나만 들어가야한다고 알고있는데 여기서 의미없는 div 대신에 fragment라는 이녀석을써도됌 2.어떤걸 컴포넌트로 만들면 좋은가 1.반복적인 html 축약할때 2.큰페이지들 3.자주변경되는 것들 3.전부다 컴포넌트로 만들..
State 변경함수 특징
2022. 4. 26. 22:54
리액트
코드작성할때 { let copy = 글제목; copy[0] = '여자코트 추천' set글제목(copy) }}>글수정 이렇게하면안됌 { let copy = [...글제목]; copy[0] = '여자코트 추천' set글제목(copy) }}>글수정 이렇게해야됌 왜그런거임? [state변경함수 특징] 1.기존 state랑 신규 state랑 비교해서같으면 변경안해줌 자원절약측면임 2.array나 object 동작방식 let 글제목 = [1,2,3]; 글제목[0]= '여자코트 추천'; 글제목변경(글제목) 이렇게해도 안됌 왜그럼? 동작을 잘생각해보셈 let 글제목 => RAM으로 저장되는데 array를 수정했지 변수에 있던 화살표(바인딩하는거 모르면 자바스크립트 구조분해 검색 ㄱㄱ)는 수정안됌 기존state도 글제목..
State를 왜써야하는가(+onClick 사용법)
2022. 4. 26. 14:46
리액트
잠깐 변수설명하고갈게요 자료잠깐 저장할 땐 변수 let post = '강남 우동 맛집' const var로 쓰지만 이런식으로 사용합니다. let 변경할수있는 변수 이지만 전역적으로 사용가능 const는 변경할수없는 변수 이지만 전역적으로 사용가능 var는 변경할 수 있는 변수 이지만 funcion안에서만 사용가능 근데 리액트에서는 state를 사용합니당 왜 state를 써야하냐? 변수와 state의 차이점 갑자기 변수 데이터가 강남우동에서 역삼우동으로 바뀌면 html에 자동으로 반영이안됌 변수와 다르게 state는 갑자기 변경되면 state경우에는 html은 자동으로 재렌더링됌 변동시 자동으로 html에 반경되게 만들고싶으면 state쓰셈 빡대가리식 정리 :자주변경될것같은 html부분은 state로 만들..
리액트 JSX 문법 (ClassName,데이터바인딩, 스타일적용방법)
2022. 4. 26. 13:42
리액트
1.ClassName 블로그임 자바스크립트에서 이렇게하던걸 아래처럼 써야됍니다 블로그임 2.데이터바인딩 let post = '강남 우동 맛집'; document.querySelector('h4').textContent=post 자바스크립트에서는 document에서 가져온거 {post}하면 끝남 변수넣을땐 {중괄호} 전문용어로 데이터바인딩이라고함. 3.스타일적용방법 블로그임 style 넣을때는 이렇게하면댐 중괄호안에 오브젝트 형식으로 넣어야함 font-size 말고 fontSize라고입력해야함 카멜머시기라고함