React basic

JSX 문법최상위 요소는 하나여야 한다최상위 요소를 return 하는 경우, () 로 감싸주어야 한다.자식들을 바로 랜더링하고 싶으면 <>자식들 </>를 사용해야 한다. ex) React.Fragmentif 문은 사용할 수 없다.\-> 삼항 연산자 , &&

컴포넌트 기본값 설정하기방법 1. Component.defaultProps 를 사용하여 내부 props 값들을 임시 지정이 가능하다.방법 2. static defaultProps 사용하여 설정 ( 해당 방법은 function(hook) 사용일 경우 적용되지 않음!)

react에서 state 값을 선언할때 두가지 예시로 선언이 가능하다.방법 1. state = {key : value} 선언 이 방법이 쉽지만 때론 다른 방법을 사용해야 하는 상황이 오기도 한다.방법2. constructor(props) 사용문법이 어렵다면 그냥 외우는

우선 리액트 공식문서를 보면컴포넌트 생명주기모든 컴포넌트는 여러 종류의 “생명주기 메서드”를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다. 이 생명주기 도표를 필요할 때마다 활용하면 좋습니다. 아래 목록에서 자주 사용되는 생명주

방법 1. 이벤트 핸들러 바로옆에 bind 붙이기방법2. constructor(props) 활용해 해당 method에 bind(this) 붙이기방법3.method 를 함수형으로 바꿔주기 (추천)개인적으로 방법 3이 코드도 가장 적게 들어가고 편리함!

react 세팅하기npx create-react-app "생성할 폴더명"이렇게 나온다면 설치에 성공했다는 것입니다!아래 나온 가이드처럼 입력해 줍니다cd "폴더명"npm start해당 폴더를 열면 폴더구성이 이렇게 되어있다.npm start를 실행하면 위 이미지처럼 r

ESLint , Prettier, husky 를 활용해 git commit 전에 알아서 정리시켜서 commit 시키기코드를 쓰다보면 어느순간 코드가 지저분해지는 경우가 있다.이럴때 일일히 commit 전에 코드를 정리해주고 commit 시키는 경우가 많은데,정리를 해서

이런식으로 ? 뒤에 딸려들어가는 key 와 value 값을 params 라고 한다.url주소와 상관없이 params로 들어가면 동일한 url에서도 여러가지 필터들을 겹쳐 표현된다.우리들이 필터를 사용해 검색할때 검색 정보를 들고가는 역할을 한다.https://

v5인 경우 Swich를 사용하고, v6인 경우 Routes 로 변경되었다.👉 v5👉 v6개인적으론 v5가 직관적이도 맘에든다..기본 App.js 에서 Route를 구성할때 Swich로 감싸주면 route 기능을 좀 더 실용적으로 사용할 수 있다.Route를 감싸는

리액트에선 페이지를 불러올때 두가지의 방법이 존재한다a태그를 사용하는 방법은 기존 html을 사용할때 쓰던 방법으로 페이지를 재 렌더링을 시켜줌으로 이동하는 방법이다. 때문에 페이지 이동을 하면서 새로운 데이터를 다시 불러오게 되며 href를 사용해 경로를 지정해줄 수

npm i styled-componentsstyled-components는 react를 사용하면서 css파일이 아닌 하나의 태그자체에 속성을 주고, 여러번 재사용할 수 있도록 해준다. styled-components를 사용하면 삼항식이나 여러가지 효과를 적용하고 속성을

npm i react-shadow리액트 첫 설치시 구조는index.html 내부에 App이라는 id 값에 App.js 가 들어간 구조로 이뤄져 있다.때문에 index.css 파일이 있는 경우 하위 요소인 App.js 에 모든 스타일에 영향을 주게되는데, index.ht

👉 ant Design 설치npm i antd리액트에서 사용하는 컴포넌트 라이브러리 중 하나인 ant design은 많은 ui 컴포넌트를 제공한다!디자인이 어렵거나, 캘린더 기능을 사용할때 사용하기 좋다공통스타일을 적용하기 위해서 index.js로 가서 전역으로 cs

Row, Col 을 사용해 import { Row, Col } from 'antd';Row 로 한 행을 만들고Col , span을 사용해 한 줄을 균등배분하는것이 가능하다일반 분배Row항목 수를 임의대로 조절하고 싶을때 gutter<Col span = {8} st

componentDidMount일때도 실행 componentDidUpdate 일때도 실행시켜준다. 결국! 컴포넌트가 mount 되고, update 될 때 반복적으로 실행이 된다는 뜻이다!useEffect는 한 jsx 파일 내에서 여러번 사용이 가능하다! 👇compon

리액트 프로젝트 설치npx create-react-app 프로젝트 명cd 프로젝트 명npm startgit 에 프로젝트 push하기순서대로 진행하기git init 👉 내 git 내부에 Repository 생성!👉 해당 이미지처럼 Repository 내부에 들어가면