React

Class 컴포넌트모든 기능을 이용할 수 있음(state, ref…)문법이 복잡함Function 컴포넌트UI 렌더링만 할 수 있음문법이 간단함React Hook(낚아채오기) 덕분에 Class 컴포넌트에서만 쓰던걸 Funtion 컴포넌트에서 쓸 수 있게됌굳이 문법이 복잡

InfoCircle에 color를 props로 전달해야하는데내가 넣어야하는 color가 PALLET에서 Import해오는 문자열이었다..그래서 처음에는❌ 이렇게 그대로 넣는건가 했는데 색이 나오지않음!!그래서 찾아 본 결과컴포넌트의 prop으로 변수 값을 넘길 때

✔ 조건부 렌더링을 할 때는 css를 import 해와야한다!css : 복잡한 조건부 스타일링이나 다른 CSS 규칙을 컴포넌트에 동적으로 적용하고자 할 때 유용하며, 프로퍼티에 따라 조건부 스타일링을 훨씬 편리하게 할 수 있습니다. 으로 작성하면 된다!

〰 react, TypeScript, styled-components를 사용했습니다table을 감싸는 div를 만들고, style에 코드를 작성해줍니다.overflow: auto 데이터가 넘어갈 경우에만 scroll이 나옴overflow: scroll : 항상 테이블에

클래스 컴포넌트에서만 이용할 수 있었던 기능을 함수 컴포넌트에서도 이용할 수 있도록 도와주는 메서드들과거 리액트는 거의 모든 컴포넌트를 Class 컴포넌트를 사용했음클래스 컴포넌트 : 모든 기능을 이용할 수 있음ex. State, Ref, …hooks : 낚아채다use

컴포넌트 내부에 새로운 Reference 객체를 생성하는 기능useState값이 변경되면 컴포넌트 리렌더링컴포넌트 내부의 변수로 활용 가능useRef어떤 경우에도 리렌더링을 유발하지 X특정 DOM 요소에 접근, 조 가능컴포넌트 내부의 변수로 활용 가능렌더링에 영향을 미

컴포넌트 분리UI 구현하기 (+CSS)기능 구현하기현재 카운트를 볼 수 있는 Viewer 컴포넌트카운트를 증감시킬 수 있는 Controller 컴포넌트count 변수를 Viewer와 Controller 컴포넌트에서 공유해야하기때문에,App.jsx에서 useState로

onClick이벤트를 통해 함수에 인자를 넣을 때, onClick 으로 바로 함수를 넘겨주면 안된다화살표 함수를 이용해서 함수를 감싸고 넘겨주어야한다.매개변수를 받는 함수는 화살표 함수 로 감싸기매개변수를 받지 않는 함수는 함수 이름만 써도 ok이유컴포넌트가 렌더링될

컴포넌트의 사이드이펙트 (파생적인 효과)를 제어Mount, Update, UnMount일 때, 어떤 동작을 할 수 있음 뒤에 배열에 들어있는 값이 변경되게 되면, 앞에 있는 콜백함수가 실행됨배열 = 의존성배열= dependency array= deps이 배열에 여러개

화면에 맨 처음 렌더링 될 때 (탄생)빈배열을 전달하면 mount 될 때 실행!컴포넌트가 마운트 될 때, 데이터를 불러오는 코드 작성 등변화, 재렌더링배열을 생략하고 콜백함수만 인자로 전달하면 재렌더링이 될 때 콜백함수가 실행됨mount 될 때도 같이 실행됨useRef

투두리스트를 만드는중에 filteredTodos 배열을 map을 이용하여 하나씩 TodoItem이라는 컴포넌트로 props로 전달하여 렌더링하려고 하였다!맨 처음에는 map(()=>{})형식으로 작성했었는데 중괄호부분이 렌더링이 안됐다.그래서 이렇게 .map(()=>반

memoriaztion 기법으로 불필요한 연산을 최적화하는 React Hook 동일한 연산을 다시 수행해야할 때, 결과값을 메모리에 저장!해서 또 연산할 필요X첫번째 인자 : 콜백함수두번째 인자 : 의존성 배열(deps)deps가 변경되었을 때만, 콜백함수를 실행콜백

vite로 생성한 react 프로젝트를 localhost 외에 네트워크 주소 등으로 접속하고 싶을 때는 vite.config.ts를 수정해야줘야합니다.서버가 수신할 IP주소 지정모든 주소를 수신하려면 0.0.0.0 또는 ture로 설정합니다.또는출처 : vite 외부에

React19 출시로 인해 cra가 중단되어서 에러가 발생한다.해결방법은 1\. yarn이나 vite를 사용해서 리액트 앱을 만드는 것2\. react18버전으로 다운하는 법이 있다.우선 cra로 리액트앱을 만들어준다.만든 리액트 앱으로 경로를 이동한다.버전을 다운한다

개인 프로젝트를 하면서 import문들이 중구난방으로 있는 것을 자주 볼 수 있었다. 무언가 기준을 잡고 정렬하면 좋을텐데..라는 마음만 가지고 정렬해보았지만, 계속 생겨나는 import문때문에 다시 지저분해지기일수였다!! 그런 나에게 자동으로 정렬을 해주는 플러그인을

피그마에 있는 input checkbox와 동일하게 만들기 위해서 커스텀을 시작했다!일단 input태그 바로 밑에 label태그를 작성해준뒤, input의 id와 label의 for속성을 동일하게 작성하여 연결해준다.React에서는 label의 for 속성을 htmlF