React

인스타그램 댓글 달기 구현하기

react 초기세팅

react

React

MenuTab 구현하기

React

🍒 Lifecycle의 기본순서 > - constructor render componentDidmount fetch완료 render (setstate) componentDidupdate 아래코드로 state와 setstate를 확인해보자! 여기서 fetch는

🍒 React-Router react는 view만 담당하는 라이브러리이다. 그래서 라우팅을 담당하는 react-router를 따로 설치해주어야 한다 원래 싱글페이지 어플리케이션(SPA)는 주소가 없어 접속하기 힘들었지만 react-router를 사용하면 페이지를 깜

Hooks는 무엇일까? Hook은 state의 생명주기 기능(lifecycle) 을 연동 할수 있게 해주는 함수이다 React에는 4가지의 Built-in Hooks(useState, useEffect, useRef, useReducer) 등이 있다. 왜 사용 할까

component 재사용? > 구조가 유사하게 반복된다면 이미 만들어진 컴포넌트로 재사용을 하여 줄일 수 있다. 비슷한데 다른부분을 컴포넌트화를 시켜서 변화를 준다. isMyID가 ture이거나 false일때 컴포넌트가 보여지게 할 수도 있었다 하지만 propfi

기존 클래스형에서 리액트 Hook이 새롭게 추가 되었다. 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 사용할 수 있다. 여기서useState는 Hook에서 처음 배우게 될 함수이다. 클래스와 함수형 비교 1. state 변수 선언하기 클래스 컴

React router? > react는 view만 담당하는 라이브러리이다. 그래서 라우팅을 담당하는 react-router를 따로 설치해주어야 한다. 원래 싱글페이지 어플리케이션(SPA)은 주소가 없어 접속하기 힘들었지만 react-router를 사용하면 페이지를

css전처리기. Nesting을 활용하여 중복되는 코드를 줄일 수 있고 변수, 반복문, 함수 문법으로도 css를 작성할 수 있다.위와 같이 라이브러리설치를 진행하면 확장자 .scss로 css를 작성할 수 있으며 이 라이브러리는 css로 컴파일 해준다. css.reset

🦔 부모컴포넌트에서 자식컴포넌트로 props 내려보내는 방법외에 페이지 이동시 routing방법으로 내려보내는 방법도 있다! 🙍‍♀️ input에 입력되는 값을 button클릭 시 페이지가 이동되며 입력된 값을 props로 내려보내기react-router-dom에

보낼 때 inputValue키에 inputValue를 담아 보냈다. (여기서 inputValue는 input에 입력하면 set이 된다.)받을 때 결과 확인 🤦‍♀️ 하지만 새로고침을 하면 값이 사라지는 것을 볼 수 있었다. 마찬가지로 component로 확인해보면&l