name https://images.velog.io/tags/React.png

# React

리액트(React)는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.

23051개의 포스트

TIL 221001

useRef ?const ref = useRef(value){current:value}역할저장공간state의 변화 > 렌더링 > 컴포넌트 내부 변수를 초기화Ref의 변화 > no 렌더링 > 변수들의 값이 유지됨화면 업데이트 -> stateRef 렌더링이 되도 값은 유지

약 3시간 전
·
0개의 댓글
·

React Router

Router란? Route는 길, 경로를 나타내는 말이다. Router는 경로를 설정해주는 도구를 말한다. SPA(Single Page Application)은 기본 구조가 있는 어떤 하나의 페이지 내에서 필요한 부분만 서버에서 데이터를 받아와 브라우저 내에서 보여

약 3시간 전
·
0개의 댓글
·
post-thumbnail

React - Todolist 만들기 #2

로컬스토리지 기능없이 일단 구현해둔 글 작성기능

약 3시간 전
·
0개의 댓글
·
post-thumbnail

리액트 라이브러리 Axios 오류 "Uncaught TypeError: Axios.post is not a function"

axios_WEBPACK_IMPORTED_MODULE_10\_\_.Axios.post is not a functionAxios 라이브러리를 리액트를 사용하는중 이런 오류를 몇번씩 봤었지만 힘들게 오류를 해결하고 나중에 가서 또 잊어버리고 무한지옥에서 빠져나오지 못하는

약 3시간 전
·
0개의 댓글
·

hooks 공식 설명

이번엔 딱 개념만 간단설명!hook 컴포넌트 유지보수를 더 쉽게 해주고 생명주기 메서드에 관련없는 로직이 섞여 들어가는것을 방지한다. 그리고 연관없는 코드들이 단일 메서드로 결합되서 발생되는 버그를 예방시켜준다.서로 비슷한것을 하는 작은 함수의 묶음으로 컴포넌트를 나눈

약 4시간 전
·
0개의 댓글
·
post-thumbnail

JSX 소개

react 를 입문하여 공부하던 도중 javascript 와 다른 표현식을 쓰는게 있어서찾아보니 JSX 였다 . 그래서 react 공식 홈페이지를 참고하여 JSX 를 소개할까 한다.먼저 위에 있는 태그 문법은 문자열도, HTML 도 아니다. 저것을 JSX라 하며 Jav

약 5시간 전
·
0개의 댓글
·

로그인 통신, 토큰 받고 사용하기, jwt

위코드 1차 팀프로젝트를 진행하며 정리한 내용입니다. 로그인 한 유저에게는 토큰(JWT)을 발급하고 이를 브라우저의 로컬스토리지에 저장해서 관리합니다. 이후 마이페이지 접속이나 상품 주문 및 삭제의 동작을 할 때는 해당 토큰을 제시해 인증된 사용자라는 것을 알려야 합니

약 5시간 전
·
0개의 댓글
·

리엑트 라우터 3 : url파라미터 사용해보기

특정 component에 urlParams를 사용한 데이터 바인딩으로 동적인 페이지 구현해 보려고 한다. 우선 app.js안에 <Detail>component를 사용하는곳에 shoes라는 props를 전송했다. Detail 컴포넌트는 props파라미터를 등록해서

약 5시간 전
·
0개의 댓글
·

[React] use 커스텀 훅 (useCustomHook)

use 커스텀 훅은 반드시 use로 시작해야한다. 리액트에서는 use로 시작하면 React Hook으로 인지하고, 오류가 발생했을 때 알려준다.

약 6시간 전
·
0개의 댓글
·

React 기반 프레임워크

프레임워크 vs 라이브러리 라이브러리 : 유저가 필요하면 라이브러리를 불러옴 프레임워크 : 프레임워크가 필요하면 라이브러리를 불러옴 React 기반 프레임워크 NextJS, Remix, Gatsby 정해진 규칙에 따라 파일을 만든다. 클라이언트 사이드 렌더링 문제가

약 6시간 전
·
0개의 댓글
·

9/30 TIL

하잇

약 6시간 전
·
0개의 댓글
·
post-thumbnail

[React] checkbox 쉽게 다루기 (allCheck)

(멋있는 짤이다 !!)checkbox 가 4개일 때... 그리고 checkbox 가 50개일 때같은 방법으로 쓸 순 없다 .,,,!checkbox 전체 선택 코드 개선해보기 !input이 폭포처럼 쏟아지는 프로젝트를 맡다보니... 더 효율성 있는 방법을 찾아보고...알

약 8시간 전
·
0개의 댓글
·

9/30 TIL

props / useState

약 8시간 전
·
0개의 댓글
·

Google analytics 사용하기

google analytics 웹 프로젝트에서 접속량을 파악하기 위해 구글 애널리틱스를 사용해보기로 했다. 처음에 철자 헷갈렸는데 뒤에 나오는 바보짓 하느라 철자 다 외움 별로 안 중요한 개발환경 및 버전 프로젝트 설정 CODE 구글 애널리틱스에서 제공하는 코드

약 8시간 전
·
0개의 댓글
·

[React] location.state 활용해보기

만약 두개의 버튼이 있고, 두개의 버튼 모두 클릭 이벤트로 하나의 페이지로 이동하는데 다른 컴포넌트를 렌더링 해야 할 때는 location.state 활용해서 쉽게 파라미터를 전달 할 수 있다위의 Link 태그는 계정찾기 페이지에서 아이디를 찾는 폼이 렌더링 되게끔 하

약 9시간 전
·
0개의 댓글
·
post-thumbnail

[React] 컨텐츠 길이 상관 없이 Footer 고정하기

컨텐츠의 길이에 상관없이 Footer 하단 고정을 손 쉽게...... 어 ?>~!손쉽게 해보자 . . .. .창틀을 빼고, 스크롤은 포함한 크기 window.innerHeight 를 우선 구해서 css 속성을 새로 설정한다.setProperty()object.setPr

약 9시간 전
·
0개의 댓글
·
post-thumbnail

[React] lodash throttle 로 DOM event 제어하기

롤이 생길 경우 상단으로 스크롤 이동 시킬 버튼,스크롤 이벤트가 빠른 속도로 실행될 ,, 경우이기 때문에 DOM event 를 제어하여 구현해야 한다.예를 들어 어떤 스크롤 위치부터 한 헤더가 렌더링 되게끔 하고 싶을 때이렇게 하면 scrollY 위치가 조금이라도 변경

약 9시간 전
·
0개의 댓글
·

React 테스트??

브라우저에서 작성한 코드를 미리보고, 테스트 하는 것 우리가 보는 것이 사용자가 보는 것과 똑같기 때문에 매우 중요함단점 : 수동으로는 가능한 모든 조합과 시나리오를 테스트 하는 것이 힘듦추가적으로 작성한 코드를 통해 작성된 코드를 테스트하는 것 코드가 변경될 때마다

약 9시간 전
·
0개의 댓글
·
post-thumbnail

xml 파일을 json으로 변환하기

beginning 코스에서 나를 제일 괴롭힌건 다름아닌 api 가져오기였다.강의에 첨부된 api가 유효하지 않아 말로만 듣던 CORS 에러를 뿜어내고 계셨다.그래서 찾아본 결과가 영화 리스트를 가지고 올수 있는 api 였는데 이건 xml로 받아져 아주 신기한 형태로 전

약 10시간 전
·
0개의 댓글
·
post-thumbnail

팀으로 일하는 법 (깃허브)

팀으로 프로젝트를 하면서 처음 시작을 어떤식으로 해야되는지를 배웠습니다.

약 10시간 전
·
0개의 댓글
·