# react js

50개의 포스트

Vanilla JS와 React JS 비교하기

HTML을 만든다.Javascript로 가져온다.event를 감지한다.데이터를 업데이트 한다.HTML을 업데이트 한다.계속 이런 방식으로 작업하다가는 작업양이 많아질 경우 계속 가져와서 계속 event listener를 달고 handleClick만들고 handleSec

2022년 5월 20일
·
0개의 댓글
post-thumbnail

Debouncing, Throttling

구글의 검색창을 매의 눈으로 살펴보면 검색어를 입력할 때 바로 연관 및 추천 검색어가 뜨는 것이 아니라 약간의 딜레이를 가지고 뜨는 것을 알 수 있다. 이는 디바운싱이라는 방식이 적용된 것으로 연속해서 일어나는 이벤트를 이벤트가 일어날 때 마다 처리하는 것이 아니라 한

2022년 4월 9일
·
0개의 댓글
post-thumbnail

useEffect

클래스 컴포넌트에서는 componentDidMount(), componentDidUpdate(), componentDidUnmount() 메서드를 이용해 life cycle을 조절했다.함수 컴포넌트에서는 클래스 컴포넌트처럼 나누어 사용하지 않고 useEffect라는 하

2022년 4월 9일
·
0개의 댓글

useRef

자바스크립트에서 태그에 접근할 때getElementById(), getElementsByClassName 등을 이용한다.이와 다르게 React에서는 Ref를 이용한다.그리고 Ref는 클래스 컴포넌트와 함수 컴포넌트에서 이용 방법이 서로 다르다.클래스 컴포넌트에서는 cr

2022년 4월 9일
·
0개의 댓글
post-thumbnail

State Lifecycle

클래스 컴포넌트(class component)에서는 원하는 시점에 코드가 실행되고 종료되도록 설정을 할 수 있다.필요없는 코드가 종료되지 않고 계속 사용된다면 그만큼 리소스가 낭비되기 때문에 시작과 종료시점을 설정하는 것은 중요하다.랜더가 되고나면 먼저 마운트(comp

2022년 4월 8일
·
0개의 댓글

Class Component, Functional Component

컴포넌트는 React애서 만든 기능을 한 번만 쓰고 말거나 코드를 복사해서 붙여넣기 할 필요 없이 각 기능을 작은 조각으로 만들어 필요할 때 마다 불러와 쓰는 것이다.그리고 그 컴포넌트의 종류는 2가지로 class component와 function component가

2022년 4월 8일
·
0개의 댓글
post-thumbnail

[CPU] 니꼴라스 ReactJS로 영화 웹 서비스 만들기

니꼴라스 React JS로 영화 웹 서비스 만들기

2022년 4월 2일
·
0개의 댓글

State Lifting

React는 데이터의 흐름이 양방향이 아니라 단방향이다.한 컴포넌트에서 사용하고 있는 것을 부모컴포넌트 또는 형제컴포넌트에서는 사용할 수 없다.그렇기 때문에 두 형제컴포넌트에서 같이 사용하고 싶은 기능이 있다면 그 부모 컴포넌트에 코드를 작성하고 props를 이용해 각

2022년 4월 2일
·
0개의 댓글

useState prev

React-hook 중 하나인 useState를 하나의 함수에서 여러번 사용할 경우 원하는대로 결과가 안나오는 문제가 생길 수 있다.아래는 카운트 값에 1,3,5,7을 차례대로 올려 결론적으로 버튼을 한 번 누르면 16이 오르길 바라고 만든 코드이다.하지만 실제로 작동

2022년 4월 2일
·
0개의 댓글
post-thumbnail

React state, props

기본 값을 가지고 시간이 지나거나 조건이 변하면 그 값이 변하는 것.react-hooks에서 useState를 사용해 JS의 변수처럼 사용할 수 있다.state : 변수setState : 변수 변경properties의 줄임말로 컴포넌트를 구성할 때 사용할 수 있다.(필

2022년 3월 27일
·
0개의 댓글
post-thumbnail

Container Presentational Pattern

코드를 한 파일에 전부 작성하면 굉장히 길어져 가독성이 떨어져 오류가 생겨도 찾기 힘들고 특히 협업을 할 때 효율성이 떨어질 것이다.이를 방지하지 위해 코드의 역할에 따라 파일을 나누어 놓는 것을 Container/ Presentational 패턴이라고 한다.React

2022년 3월 24일
·
0개의 댓글

Conditional Rendering

주어진 조건에 따라 보여주는(렌더링하는) 내용이 달라지는 것위 코드도 조건부렌더링의 예라고 볼 수 있다.하지만 흔히들 말하는 조건부렌더링은 삼항연산자, &&/||연산자, 옵셔널 체이닝(Optional-Chaining)을 사용하는 것을 의미한다.data에서 받아온 정보가

2022년 3월 22일
·
0개의 댓글

Static, Dynamic Routing

라우팅 = 페이지이동 const router = useRouter() <- use를 썼다? hooks router.push("이동할 페이지") <- push 말고도 명령어 많이 있음 라우팅은 정적라우팅과 동적라우팅이있다 정적라우팅은 라우팅할 페이지를 하나하나 설

2022년 3월 21일
·
0개의 댓글
post-thumbnail

CPU 토이 프로젝트 도전하기

CPU 토이 프로젝트 도전하기

2022년 3월 21일
·
0개의 댓글

Rest-API / GraphQl-API

로이 필딩(Roy Fielding)이 박사 학위 논문에 정의한 개념이다.REST는 Representational State Transfer의 약자이다.HTTP 기반의 웹에서 대부분 사용되었으며 이를 따르는 시스템을 RESTful이라고 표현하기도 한다.Google, Fa

2022년 3월 19일
·
0개의 댓글

Template Literals

공부를 하던 중 다음과 같은 값을 나타낼 필요가 있었다.return이나 console.log를 이용해 표현해보려고 했더니너무 복잡하고 번거로웠다.그러다 Template Literals 라는 좋은 방식을 알게 되었다.내장된 표현식을 허용하는 문자열 리터럴로 위에서 사용한

2022년 3월 19일
·
0개의 댓글

Try / Catch

Try / Catch 는 실행할 코드에 문제 또는 예외가 생겼을 때 어떻게 반응할지를 정하는 코드이다.catch 뒤에 if를 사용하여 문제 상황에 맞는 결과를 안내받을 수 있다. Catch 뒤에 Finally 를 추가하여 오류 발생 여부와 관계없이 실행되기 원하는 코드

2022년 3월 18일
·
0개의 댓글

Import & Export

외부에서 내보낸 정보를 가져올 때 사용한다.(컴포넌트, 이미지 등)가져올 내용에 따라(한 개만 가져올 것인가, 여러 개를 가져올 것인가, 전체를 가져올 것인가)다음과 같이 분류된다.문서 전체를 가져오는 경우하나만 가져오는 경우여러 개를 가져오는 경우문서 전체를 가져올

2022년 3월 16일
·
0개의 댓글

1.1 React masterClass

만족스럽지는 못하지만 책에있는 모든 기능구현을 끝내고 오늘부터 React JS 공부를 다시 시작했다. 첫 챕터부터 매우 만족스러웠다 팀플할때 애먹었던 부분중 하나가 styled-component를 사용하여 CSS를 할 때 였는데 이번 챕터에서 가려운 부분을 많이 긁어주

2022년 1월 1일
·
0개의 댓글

React js에서 page key

Next js를 하는데 dynamic Page에서 history를 pop up 할 때 url의 id가 바뀌었음에도 페이지의 reload가 되지 않았다.원인 : Page에 key 값을 부여하지 않아서 ...해결 : Page에 unique key를 줬더니 아주 잘 된다 .

2021년 11월 16일
·
0개의 댓글