리엑트19 컴포넌트 만드면 좋은 점 어떤걸 컴포넌트로 만들면 좋은가? 어떤걸 컴포넌트로 만들면 좋은가?1. 반복적인 html을 축약할 때2. 큰 페이지들3. 자주변경되는 것들 단점은?state 가져다쓸 때 문제생김 리액트 환경에서 동적인 UI 만드는 법 (ex: 모달창 만들기) [동적인 UI 만드는 3 step]1. html css로 미리 디자인완성2. UI의 현재 상태를 state로 저장3. 조건문으로 state에 따라 UI가 어떻게 보일지 작성 map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때 [1, 2, 3].map(function () { console.log(1); }); 배열.map(콜백함수) 로 사용한다. map() 함수1. 왼쪽 array 자료만큼 내부코드 실행해준다.2. return 오른쪽.. 2024. 10. 22. 7-1. 메모장 프로젝트 소개 및 설계 2024. 10. 8. 3-5. 스터디파이 강의 컴포넌트 만들기에서 사용한 css 리스트, 컴포넌트로 나눠본 것 CourseCard.css ul,li { list-style-type: none; margin: 0;}.CourseCard { max-width: 300px;}.cover { width: 100%;}.cover img { width: 100%; border-radius: 4px;}.tags { display: flex; font-size: 0.8rem; font-weight: 600; line-height: 1.47; padding: 3px 0 5px 0;}.tags .tag:not(:last-child):after { content: '·';}.name { margin: 0; padding: 6px 0;}.price { font-size: 0.9rem; font-weight.. 2024. 10. 5. 1-13. provide와 inject 일반적으로 하위 컴포넌트에 값 전달할 때 아래처럼 전달한다.다만 이럴 경우 최하위 컴포넌트에서만 필요한 값인 경우, 그 모든 상위 컴포넌트에서 값을 전달만 해주는 부분을 추가해줘야 하기 때문에 복잡해진다.특정 하위 컴포넌트에서만 값이 필요한 경우 provide와 inject를 사용할 수 있다.(depth가 아무리 깊어도!!) https://vuejs.org/guide/components/provide-inject.html#prop-drilling 아래는 provide/inject 사용 예시 2024. 9. 20. 이전 1 2 3 4 5 다음
