React
1.[React]캐러셀 만들기(1)-무한 캐러셀
오늘의집 클론코딩을 진행하면서 캐러셀 컴포넌트를 직접 구현하게 되었다. 구현하는 과정에서 어려움을 느꼈고 확실한 이해를 위해 캐러셀 프로젝트를 따로 진행하였다. 기능 보여지는 이미지는 한개이다. Prev() 버튼을 조작하여 이미지 리스트를 움직인다. 마지막 이미지에서
2.[React]캐러셀 만들기(2)-무한캐러셀(css)
캐러셀 만들기(1)-무한캐러셀 ⬆️(인덱스를 사용해서 무한슬라이드 만들기) 간단하게 css를 사용해서 무한 슬라이드를 구현해보자. 구현 결과 기능 이미지가 자동으로 슬라이드된다. 동그란 버튼을 클릭해서 원하는 순서의 이미지로 바로 이동할 수 있다. 구현 CH
3.[React] 리액트란?
사실 리액트에 대해서 무작정 뛰어든 나로서는 리액트의 정의를 확실히 내리지 못한채 리액트의 기능들을 익히고 갖다쓰기 바빴다. 그래서 리액트 포스팅을 진행하며 리액트에 대한 개념을 확실히 이해하고 누군가 나에게 리액트가 무엇인지 물어보면 명확하게 대답할 수 있는 Fron
4.[React] DOM 그리고 Virtual DOM
React는 Virtual DOM을 사용한다.그렇다면 DOM이 무엇인지부터 알아야한다. 이번 포스팅에서는 DOM과 Virtual DOM을 알아보자.
5.[React] 클래스형 컴포넌트 & 함수형 컴포넌트
클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇일까?👀
6.[React] props 와 state
props와 state에 대해 알아보자 💫
7.[React] 클래스형 컴포넌트(4)-라이프사이클 메서드
LifeCycle (생명주기) 모든 리액트 컴포넌트에는 생명주기가 존재한다. 컴포넌트의 라이프사이클 : 컴포넌트가 브라우저상에 렌더링되기 전 ~ 사라질 때까지 LifeCycle Method(생명주기 메서드) 컴포넌트의 라이프사이클에서 일어나는 작업들을 처리할 때 사
8.[React] 클래스형 컴포넌트(5)-라이프사이클 메서드 사용하기
앞서 배운 라이프사이클 메소드를 사용해보자.(참고 : 리액트를 다루는 기술)우선 LifeCycleTest.js 파일을 src 폴더 안에 만들어주자.클래스 안에 number와 color 속성을 지닌 state를 선언해준다.사용할 ref도 미리 선언해놓는다.construc
9.[React] Hooks 알아보기
리액트 공식 문서에 다음과 같이 나와있다.Hooks는 리액트 버전 16.8에 새로 나왔습니다. Hooks를 사용하면 클래스를 사용하지 않아도 상태 및 기타 리액트 기능들을 사용할 수 있습니다.즉, Hooks는 상태 관리가 가능하고 라이프사이클 api를 사용할수 있도록
10.[React] Hooks - useState
가장 기본적인 Hook 함수이다.함수형 컴포넌트에서도 상태를 관리할 수 있게 해준다.사용예시)useState 함수의 파라미터에는 상태의 기본값을 넣어준다.(위 예시에서는 value의 기본값을 0으로 넣어주었다.)useState 함수가 호출되면 배열이 반환되는데,배열의
11.[React] Hooks - useEffect
<span style="color:리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 함수이다.즉, useEffect는 클래스형 컴포넌트의 componentDidMount(첫 렌더링 완료 후) componentDidUpdate(리렌더링 완료
12.[React] Hooks - useReducer
useState처럼 상태를 관리하고 업데이트할 수 있는 함수이다.컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. <span style="color:- 현재 상태, 업데이트에 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수이다.(
13.[React] Hooks - useMemo & useCallback
함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.예제를 통해 이해해보자.(예제 내용은 '리액트를 다루는 기술' 책을 참고했다.)평균 값을 계산하는 컴포넌트를 만들어보자.input에 값을 넣고 버튼을 클릭하면 onInsert 함수가 실행되며 값들의 리스트(li
14.[React] Hooks - useRef
특정 DOM을 가리킬 때 쓰는 함수이다.ref가 HTML에 쓰이면, useRef로 생성된 ref는 전달받은 DOM 엘리먼트를 current 프로퍼티의 값으로 받는다.특정 DOM 요소의 값을 가져오기 (대표적으로 input 요소의 value 가져오기, input 요소에
15.[React] key props
결론 : key 값에 고유한 값을 넣어주자.
16.[React] input창 enter 이벤트
input 태그onKeyUp함수
17.Dot Notation
현재 드롭다운이나 모달 같은 요소들을 라이브러리를 사용하지 않고 직접 모듈화하는 작업을 진행중이다. react-bootstrap에서 드롭다운 모듈을 Component.Component 와 같이 사용할 수 있게 한 것이 마음에 들었고 이를 개인 모듈화 프로젝트에 적용하고
18.[Nextjs] Nextjs에 대해 알아보기
공식 문서에 들어가면 대문짝만하게 다음과 같은 소개글이 나온다.The React Framework for the WebNextjs는 리액트 프레임워크이다. 리액트를 기반으로 서버사이드 렌더링, 최적화 등의 기능을 제공해주는 틀이라고 할 수 있다.리액트는 SPA(Sing