[리액트] 짜잘한 개념 정리

1.defaultProps컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정하면 됩니다.함수명.defaultProps={} 형태 사용Props children 불러오기컴포넌트 내부에 다

JSX에서 null, false, undefined를 렌더링 하면 아무것도 나타나지 않는 것으로 처리

true, false를 props로 설정해서 사용할 수 있다.🔻 App.js props 보내주고 화면에 구현하는 컴포넌트 props로 true, false를 보내줌🔻 Hello.jsprops를 받아서 사용하는 컴포넌트props의 태그를 true이면 보여주게 fals

useState를 통해 중간에 값이 바뀌면 화면에 반영되게 할 수 있다.함수를 만들고, button 의 onClick 으로 각 함수를 연결해주었습니다. 리액트에서 엘리먼트에 이벤트를 설정해줄때에는 on이벤트이름={실행하고싶은함수} 형태로 설정해주어야 합니다.여기서 주의

1\. input 값 받아오기useState 사용onChange에 함수를 이벤트 객체 e를 파라미터로 받아와 사용e.target은 이벤트가 발생한 DOM인 inputDOM을 가르키게 됨DOM의 value값, 즉 e.target.value를 조회하면 현제 Input에 입

input 에 name 을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것입니다. 그리고 useState 에서는 문자열이 아니라 객체 형태의 상태를 관리해주어야 합니다.inputs들에게 할당을 받아준다.input 내에서도 name을 넣어준다.e.target에서 v

특정 DOM을 사용해야 할 때 ref 사용함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수를 사용합니다. useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 합니다. 그러

1\. map에 key값이 필요한이유Map에 key 값이없다면 중간의 값이 바뀌었을때 그 하위 값들이 전부 변하기 때문인다. key값을 사용한다면 key를 이용해 중간의 값을 추가하게 된다.

camelCase 원칙 :classNamejs : {} 내에 사용css, style : {{}} + object1\. 가정문if문을 사용하고 싶다면 함수로 만들어 밖에서 return값으로 가져온다바로 Return 안에서 사용하고 싶다면, 삼항연산자 사용반복문for문을

state 값을 바꿀 때는 항상 setState 사용!setState를 html 태그의 on속성 호출 할 때는 함수를 감싸줘야함. 아니면 무한 업데이트 됨.function(){} or ()=>{}

배열에 버튼 클릭 시 1식 늘어난 수를 추가하는 배열로 만들어주기 예시

state를 통한 Input태그 관리 예시

import할 때, js는 확장자 명을 붙이지 않는다.import할 때, css는 확장자 명을 붙여야 한다.

1\. index.js 에서는 App으로 BrouserRouter만 선언해주기2\. App.js 에서 Router들 선언해주기

1\. 둘을 모두 가지고 있는 부모 컴포넌트에 useState 선언공유해야 하는 state를 부모에서 선언하여 둘을 관리upload에서 input을 통해 content를 받고, 이를 부모의 state리스트에 적용.Input을 통해 업데이트된 contentlist를 li

컴포넌트는 사용자에게 보여지는 순간이 있고 사라지는 순간이 있다state가 바뀔 때마다 useEffect가 실행되게 사용할 수 있다

1\. 부트스트랩 설치https://react-bootstrap.github.io/react 파일의 public/ index.html title 바로 뒤에 link 기입부트스트랩에서 원하는 것 가져와서 쓰기변경하고 싶은 것은 인라인 즉 태그내에 써주면 우선순위

1\. sass 기반으로 사용하는 emotion 라이브러리구조적으로 보기 편한함2\. 설치하기https://emotion.sh/docs/introduction이모션 설치 (3가지 모두 설치)3\. src폴더에 Style 폴더 새로 생성, UploadCSS.js

1\. 웹 스토리지 웹 스토리지는 브라우저에 데이터를 저장할 수 있도록 지원하는 HTML5의 기능입니다. 웹 스토리지 종류로는 로컬 스토리지와 세션 스토리지가 있습니다. key-value 자료 구조 형태로 데이터가 저장됩니다.2\. 로컬 스토리지(local Storag

오늘의 주제 axios와 async으로 비동기적이게 데이터 불러오기 useEffect 내부에 axios를 사용할 때 함수 따로 선언 1. axios와 async으로 비동기적이게 데이터 불러오기 1-1. async 사용하기 1) async() =>{} 형태로 감싸주기

7\. 리엑트 요소와 가상돔리엑트는 메모리에 가상돔을 올려 놓고 이전과 이후의 가상돔을 비교하고 변경된 부분만 실제 돔에 반영한다.element 구조1) seconds 값이 1초마다 바뀌는데, p 태그 안의 {seconds} 부분만 변경된다.2) 만약에 div 태그 k

파일 유형에 따라 분류하는 것이 가장 흔한 방법(기능에 따른 분류도 있지만, 보편적이지 않음)1\. 유형에 따른 분류 추천api들로 구분보편적으로 사용하는 버튼과 같은 컴포넌트말그대로 한 페이지에서 보여지는 페이지 구성, 그 내부에 컴포넌트 파일 하나 더 넣어 페이지에

항상 module.css를 잘 활용하고 싶은데 묘하게 class명들이 말을 듣지않아 싹 정리해 보았다.{}괄호 안에 써준다.{}괄호 안에, \`백틱안에, ${}로 나눠 사용한다\[]안에 받고자하는 props를 넣어준다{}괄호 안에, \`백틱안에, ${}로 나눠 내부