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

# React

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

11302개의 포스트
post-thumbnail

1차 프로젝트 [브랜치] 중간회고

1차 프로젝트를 하면서 느낀점월요일부터 1차 프로젝트를 시작하였습니다. 저희팀은 작가로 선정된 사람들이 글을 올릴 수 있는 '브런치'라는 사이트를 클론코딩합니다.제가 맡은 부분은 포스팅페이지와 리스트페이지입니다. 상단바 / 헤더 / 본문 / 작가소개란 / 추천 글 리스

34분 전
·
0개의 댓글
post-thumbnail

[TIL] 상수 데이터

상수 데이터는 변하지 않는 데이터로, 정적인 데이터이다.반복되는 UI를 하드코딩으로 일일이 만들어두게 되면, 코드가 길어져서 가독성에 좋지 않고, 수정이 필요할 시 해당하는 부분을 찾기 힘들어 추후 유지보수가 힘들어질 수 있다.이를 위해 상수 데이터를 만들어 관리해주면

약 1시간 전
·
0개의 댓글

[React] 모달창 만들기

리액트 버전 모달창 만들기 > 우선, modal창을 관리할 useState를 만들고, dim처리 할 부분을 useRef를 사용하여 접근한다. 그리고 버튼을 눌렀을 때 모달을 보여주는 openModal 함수, 모달을 펼쳐져 있을 때만 닫아주는 closeModal 함수

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

김성모 짤 생성기 제작 후기

예시 이미지최근에 네이버 웹툰에서 나온 짤 중 위와 같은 짤이 있는데 이 짤이 많이 유행하고 사람들이 말풍선 안의 대사를 직접 수정해서 많이 쓰는 것 같아서 이를 편하게 하기 위해 김성모 짤 생성기 페이지를 직접 만들어서 무료로 배포해보았다.페이지 예시 이미지만든 뒤

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

리액트 #6. useMemo, useCallBack(Hooks)

리액트를 알아봅시다.

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

커링, 조합 개념 이해

커링짤며칠 전까지 하나도 이해 안갔던 커링과 조합이 어느 순간 번쩍 거리면서 이해가 되었다. 왜 이렇게 어렵게 하는거지? 했던것도 와... 이래서 이렇게 쓰는구나 라고 느껴져서 블로그에 글을 남긴다.react 공부 중 withStyles() 함수를 사용 할 때withS

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

React.js 시작하기(1)

React.js는 JavaScript를 더 효율적이고 생산적이게 이용할 수 있도록 하는 JS 라이브러리다.vanilla JS에는 React.js의 라이브러리와 문법이 존재하지 않기 때문에 이를 import from을 통해 끌어와준다. import React는 리엑트팀

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

[코드숨 리액트 6기] 1주차 주간회고

참고URL https://dal-lab.com/2019/09/18/today-i-learned/ Facts (사실, 객관) 이번주부터 리액트과정 6기 과정이 시작되었다. 학습목표 + 3개의 강의 + 2개의 과제가 주어졌고, 주차 말미엔 과제 풀이가 공개되었다. 강의를 통해 아래와 같은 부분들을 배울 수 있었다. 1/ 개발 환경 구축 ...

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

[Express] load local image file 404 error

client에서 이미지파일을 불러올 때 분명 폴더와 파일 모두 존재하는데 404에러가 뜨면서 못 불러오는 에러가 있었다.서버단에서 다음과 같이 고쳐 오류를 해결 하였다.https://expressjs.com/en/starter/static-files.html

약 4시간 전
·
0개의 댓글

Router v6에서 Protected Route

개인적으로 진행하고 있는 토이 프로젝트에서 react-router 버전을 v6으로 업데이트했다. 많은 부분이 바뀌면서 코드도 많이 바꾸게 되었다.기존 v5 라우터 코드이다. 로그인이 되어있지 않으면 Login 페이지로 이동한다.같은 동작을 하는 코드가 v6에서는 이렇게

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

fetch api

fetch api를 통해 외부로부터 데이터를 가져와 본다.

약 6시간 전
·
0개의 댓글

[zaranara.02] 로그인 페이지 모달창 구현하기 (라이브러리x)

1.로그인,회원가입 모달 구현하기2.상품 리스트 페이지 ( 필터링 포함 )이었기 때문에 로그인,회원가입 모달 구현을 우선으로 하였다.Nav랑 Footer 담당자에 시간에 맞춰서 하기에는 작업 시간이 빠듯하여 로그인 하나 회원가입 하나 이렇게 만들기 시작했다.레이아웃은

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

결제 시스템 만들기

간단한 결제 시스템 창을 호출하는 방법을 배워보겠습니다.

약 8시간 전
·
1개의 댓글

Apollo with React

설치npm install @apollo/client graphqlapollo.jsindex.jsdata받아오기 서버로 보낼 query 작성해당 query를 useQuery를 통해 서버로 보낸다loadingdata를 받아오기 전이면 loading이 true data를 받

약 15시간 전
·
0개의 댓글

React) immer

두가지 파라미터를 받는다. 첫번쨰 파라미터는 수정하고 싶은 상태, 두번째 파라미터는 상태를 어떻게 업데이트 할 지 정의.두 번쨰 파라미터로 전달되는 함수 내부에서 원하는 값을 변경하면, produce 함수가 불변성 유지를 대신해 주면서 새로운 상태를 생성해 준다. '

약 17시간 전
·
0개의 댓글

React) 컴포넌트 최적화

자신이 전달 받은 props 가 변경될 때자신의 state가 바뀔 때부모 컴포넌트가 리렌더링 될 때forceUpdate 함수가 실행 될 때 \-> 불필요한 리렌더링은 막아야 한다 ! 함수형 컴포넌트에서는 라이프 사이클 메서드를 사용할 수 없다. 그 대신 React.me

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

[React] Component의 State

🚶🏻‍♀️ State State란 말 그대로 컴포넌트의 상태 값이다. state와 props는 둘 다 object이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 한다. props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수

약 18시간 전
·
0개의 댓글

React Hooks - useRef

dd

약 18시간 전
·
0개의 댓글