728x90 반응형 > 메모65 [리액트] Mount 하고 Update 차이 비교 Mount (마운트)Mount는 컴포넌트가 "처음" 화면에 나타나는 순간을 말해.마치 레고 블록을 처음 조립해서 방에 놓는 것처럼, 컴포넌트가 처음으로 화면에 나타나는 거야.예를 들어, 너가 그림을 그리고 그 그림을 벽에 처음 붙이는 순간이 바로 컴포넌트의 "마운트"야.이때, 컴포넌트는 필요한 준비 작업을 할 수 있어.마치 그림을 벽에 걸기 전에 액자에 넣는 것처럼 말이야.Update (업데이트)Update는 이미 화면에 나타나 있는 컴포넌트가 다시 그려지는 순간을 말해.마치 레고 블록으로 만든 건물에 새로운 블록을 추가하거나, 기존 블록을 바꾸는 것처럼.예를 들어, 벽에 걸어둔 그림을 다시 꺼내서 색칠을 더하거나, 그림을 수정하는 순간이 "업데이트"야.컴포넌트는 필요할 때마다 업데이트가 일어나서 최신 .. 2024. 5. 21. [리액트] - 라우터 설치와 사용 라우터url 마다 페이지 구분.페이지 구분하는 것 = 라우팅 react-router-dom 설치 터미널 열어서 npm install react-router-dom@6 입력해서 설치설치가 잘 됐으면 npm start 해주기.import { BrowserRouter } from "react-router-dom";const root = ReactDOM.createRoot(document.getElementById('root'));root.render( );index.js 파일로 가서App 에다가 BrowserRouter 을 감싸주면 끝 import도 상단에 해주기라우터 사용하기App.js 파일에서 import 해주기. 'react-router-dom' 여기서 몇가지 컴.. 2024. 5. 19. [리액트] - 데이터 바인딩 / 컴포넌트화 / props 활용 / map() 활용 다른 js 파일에 있는 html을state에 보관해 놓고 html에 데이터 바인딩하기- export / importdata.js 에 있는 html 이 담긴 변수 data 를 App.js 로 옮기기export default 변수명; - 변수 1개 할 경우,export {변수1, 변수2}; - 변수 2개 이상 할 경우 (default 사용 안함)//data.js에 있는 것let data = [ { id: 0, title: "White and Black", content: "Born in France", price: 120000, }, { id: 1, title: "Red Knit", content: "Born in Seoul", price: 110000, .. 2024. 5. 19. [리액트] 암기할 것 = state / props / 컴포넌트 / UI State 만드는 방법 useState('보관할 자료') State 만드는 방법 예시)let [a,b] = useState('남자 코트 추천');a = state 에 보관했던 자료, 변수처럼 사용. {a}b = state 변경 함수. - 함수기 때문에 소괄호랑 같이 사용 . 어레이로 [ 남자코트추천, 함수 ] 이렇게 남음 let [글제목, set글제목] = useState([ "남자코트 추천", "강남 우동맛집", "파이썬 독학", ]);State 변경하는 방법= state 변경함수 사용= state변경함수(새로운state)let [ 따봉, 따봉변경 ] = useState(0);지금 state 에 0이 담긴 상태state를 변경하려면따봉변경(1) 이렇게 1로 변경해줄 수 있다. .. 2024. 5. 15. [CSS] position의 사용법 #12 위치를 내맘대로! CSS Position 이해하기 - 웹 코딩 강좌 (youtube.com)고윤서 강의 참고 (콜로소) position 속성(5 가지 속성)toprightbottomleftz-index속성 같이 쓰임기본 값 - static포지션과 쓰이는 5가지 속성은static 일 때는 적용되지 않음.속성들이 적용되기 위해서는relative를 함께 써야함.fixed = 브라우저의 "뷰포트" 기준으로 절대 위치로 이동.sticky = 평소에는 static 처럼 자리.컨테이너가 스크롤 되면서 요소가 사라질 무렵에는 위치 속성이 지정한 위치에서 고정되어 멈춤.psoition: relative원래 위치에서 상대적인 값을 추가해서 가짐position을 다주고 (기본적으로 띄우는 속성)z-index (더 띄.. 2024. 5. 13. HTML - data- 사용자 정의 속성 모션그래픽 디자이너 seven “감각적인 모션그래픽의 비밀, Fake 3D 애니메이션”ㅣColoso_trailer (youtube.com)실습이미지 9개사용자 정의 속성 써보기커서가 길게 들어감적기사용자 정의 속성 작성data-작명단어와 단어 조합: -값 적어줌조류 선택속성 설정이런 식으로 선택 가능 2024. 5. 9. [SASS] & 의 사용법 &의 역할&는 부모 선택자를 참조하는 특수한 키워드&를 사용하면 현재 규칙의 부모 선택자를 참조&:last-child.parent { color: blue; &:last-child { color: red; }}&:last-child는 부모 요소의 마지막 자식 요소를 선택하는 CSS 의사 클래스입니다.&:last-child 는 .parent:last-child 로 해석&:last-child의 역할.background { display: flex; justify-content: space-between; width: 100%; height: 100vh; position: absolute; padding: 0 1rem; span { display: block; h.. 2024. 5. 5. [JS] 헷갈리는 querySelectAll과 Jqeury 포함 범위 .abc (클래스 abc) 를 가진 모든 div 포함 .abc 클래스를 가진 모든 것에 이벤트 리스너 달기제이쿼리$(".abc").on("click", function () {}); - [0] 이런 식으로 순서지정해줄 필요없음querySelectAll document.querySelectorAll('.abc')[0].addEventListner('click', function () {});- 한 번에 전부 다 선택하는 방법은 없음.$(.abc ) 셀렉터로 찾은 요소 중에 x번째 요소만 선택 제이쿼리$(".abc").eq(x).on("click", function () {});querySelectAlldocument.querySelectorAll('.abc')[x].addEventListner('clic.. 2024. 4. 27. [CSS] rem 또는 em 계산 방법 (변환) 폰트 사이즈가 19.2px 일 때, rem 으로 변환 하는 방법. ( html 의 font-size 는 16px 일 때의 경우 ) 참고 사이트 PX to REM converter (instantly and bidirectional) (nekocalc.com) PX to REM converter (instantly and bidirectional) PX ↔︎ REM conversion tables PixelsREM1px0.06rem2px0.13rem3px0.19rem4px0.3rem5px0.3rem6px0.4rem8px0.5rem10px0.6rem12px0.8rem14px0.9rem15px0.9rem16px1rem18px1.1rem20px1.3rem24px1.5rem25px1.6rem28px1.8rem32.. 2024. 4. 22. 이전 1 2 3 4 5 6 7 8 다음 728x90 반응형
