react3 useEffect 이해하기 useEffect란?리액트 컴포넌트의 사이드 이펙트를 제어하는 새로운 React Hook사이트 이펙트란?우리말로 "부작용"이라는 뜻으로 리액트에서는 "부수적인 효과", "파생되는 효과"정도로 해석가능 React 컴포넌트의 사이드 이펙트 컴포넌트의 동작에 따라 파생되는 여러 효과,컴포넌트에 어떤 값이 변경되었을 때 특정코드를 실행시키거나(콘솔에다가)또는 라이프 사이클을 제어하는것(Mount, Update, UnMount 때 특정 코드를 실행 시키는 것)useEffect(()=>{ // mount 컴포넌트가 생길 때 수행 작업 return{ // cleanup //unmount 컴포넌트가 사라질 때 수행 작업 }},[의존되는 값들]);출처: https://devyihyun.tistory.com/180 [이.. 2024. 10. 18. 에어비앤비 클론 코딩_props 나는 디스트럭처링을 이해를 아직 못했다사용할 때 마다 잘 안되는데 디스트럭처링을 사용하지 않고컴포넌트를 추가 하는 방법을 적으려 한다컴포넌트화 하는게 동일한 컴포넌트에 text, 이미지 주소만 달라지는데filterIconObjs 배열안에 객체로 넣어주고배열안에 객체를 선택해주려면배열에 [0] 로 첫번째 객체를 지정해주고프로퍼티로 불러왔다 filterIconObjs는 배열이니까 filterIconObjs.text는 안된다 배열과 프로퍼티니까그리고 FilterIcon.jsx에 가서props를 가져온다디스트럭처링은 아직 사용하면 안될것 같다...한적한 시골, 컬처 아이콘, 한옥 Icon를 불러 왔다여기서 map을 사용해서 더 많은 객체를 넣어보자filterIconObjs에 객체를 복사해서 더 많은 객체를 넣었.. 2024. 10. 17. 에어비앤비 홈페이지 클론 코딩_Header 에어비앤비 홈페이지 클론 코딩 Header 부분을 끝냈다Header 부분 밑에 width:100% 선을 추가하는게 어려웠는데 (좌우 여백이 생겨서) 나는 styled-components를 사용했기 때문에 reset 패키지도 깔아줬어야했다style-components npm 설치npm install styled-componentsstyled-components를 사용하면 css를 초기화하는 방법으로createGlobalStyle을 import해서 많이 사용하는데index.js파일에 import하고 밑에 을 추가해야 한다나는 이 코드를 추가해서 사용했다a{ text-decoration: none; color: inherit; } input, textarea { -moz-user-sele.. 2024. 10. 13. 이전 1 다음
