React

React.useState(0); :결과 - 0 , setter 함수: 첫번째 요소는 state임. 초기값 0이 나옴: 두번째 요소는 state를 바꾸는 함수. → setter(prev+1) 이렇게 값을 바로 넣어주는 것 보다 set

컴포넌트 실행하면서 여러 props를 객체로 묶어서 전달됨.전달받는 컴포넌에선 하나의 객체로 prop을 전달받음.객체안의 프로퍼티값을 각각 변수로 할당하여 편하게 사용하는 편임(구조분해할당)

🔶 CSS Module1.Button.module.css (css파일을 모듈화 함): css파일을 module로 해서 필요한 여러곳에 갖다 쓸 수 있음.2.Button.js (필요한 컴포넌트에서 가져와 사용함) : create-react-app은 css코드를 jav

첫번째 인자는 함수(실행하려는 코드), 두번째 인자(지켜보려는 것)은 배열임.state 값이 바뀔때마다 계속 컴포넌트가 리렌더 되는게 아니고, 어떤 "특정 값"이 바뀌었을 때만 리렌더 되도록 선택권을 줄 수 있게됨.빈배열을 주면 - react가 지켜볼게 아무것도 없어서

컴포넌트 배열을 렌더링 할 때 key를 써줘야 함.기존 Dom트리와 이후 Dom트리가 일치하는지 확인하여, 트리의 변환이 효율적으로 이뤄지기 위해.key가 없으면 기존의 Dom과 비교하는 과정에서 리스트를 하나하나 다 비교하면서 변화를 감지해야 하는 번거로움이 발생함.

onClick이벤트 실행시 (매개변수 없이)onClick이벤트 실행시, 파라미터를 같이 보내는 법

🔶react-router-dom 페이지 새로고침 할 필요 없이, 페이지에 필요한 컴포넌트를 불러와 렌더링 하도록 도와줌.(spa)🔶BrowserRouter history API를 사용해 URL과 UI를 동기화하는 라우터🔶Routes(옛날Switch) 자식 컴포넌

🔶기본 사용🔶 prop을 통해 컴포넌트를 설정🔶 확장하려는 컴포넌트 이름을 괄호안에 넣으면 됨. 기존 Box컴포넌트를 확장한 컴포넌트가 됨.🔶 기존 컴포넌트에서 엘리먼트만 다른 엘리먼트로 교체.🔶컴포넌트에 한번에 속성을 지정하는 법

🔶

컴포넌트 안에있는 요소를 컴포넌트에서 지정하여 스타일 적용할 수 있음.span은 스타일드 Box컴포넌트로 만들지 않았지만, Box컴포넌트 안에서 span을 선택할 수 있음.&은 자기자신을 자리키는 것임. (span을 지칭하는 것과 같음.) < sass - 부모 선

🔶 Styled-Component에서 Theme을 이용해 타크모드<->라이트모드 바꾸기index.jsPracThemeApp.js

컴포넌트가 React.memo()로 wrapping 되면, React는 컴포넌트를 렌더링하고 결과를 메모라이징(Memoizing)한다.그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다. 컴포넌트의 prop

node -vnode js 깔려있는지 확인npx 깔려있는지 확인3.새로운 react 폴더 생성실행npm run start 또는 npm start모든 파일은 src 폴더 안에 있어야 함.index.js 에는

→ 내 생각 : ReactDOM이 리액트를 렌더하는 라이브러리 인데 cra하면 자동으로 설치되어 있어서 import ReactDOM만 하면 바로 jsx코드가 렌더링 되는것임?ReactDOM : 리액트 코드를 실제 HTML로 렌더링 하기 위해 사용하는 도구 ReactDO

npm i styled-componentsvscode-styled-components Extension 설치→ 출력결과props와 컴포넌트 확장→ 출력결과

🔶검색창이 안됐던 이유https://bamtory29.tistory.com/entry/React-useState%EC%9D%98-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%A0%81-%EB%8F%99%EC%9E%91https://velo