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

# React

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

4738개의 포스트
post-thumbnail

[TIL] # 32 React | 로그인 성공페이지

한 글자 아닌 아이디가 @ 포함,pw가 5글자 이상일 경우 로그인 페이지 성공!한 글자 하는것도 힘들었는데 조건에 따라 구현하는게 정말 어렵지만 꾸역꾸역 해결 해서 뿌듯하군아직 코드 리뷰를 받지 않은 상태지만 내가 쓴 코드를 다시 한 번 정리 해보자!!React는 St

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

TIL no.42 - Styled Components

Styled-Components

약 9시간 전
·
0개의 댓글

[React] react-router-dom 적용하기

책 "리액트를 다루는 기술"로 학습 중아직 리액트에 익숙하지 않아서인지 앞 내용을 보면 뒷 내용을 까먹고.. 뒷 내용을 보면 앞 내용을 까먹고..똑같은 실수를 하지않길 바라며 '미래의 나'에게 이 글을 바친다.프로젝트 생성 및 리액트 우터 적용 -> 페이지 만들기

약 10시간 전
·
0개의 댓글

Wecode 20일차

주말인 관계로 18:30 ~ 20:00 까지 헬스 state와 props의 개념에 대해 조금 더 확실히 알게됐다. this.state = { titleColor: true } titleColor는 true로 설정 onChange 함수안에 this.setState로

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

가장 쉽게 Storybook 배우기 with CRA

스토리북 세팅을 3번이나 해봤지만, 매번 어려웠던 것 같다. 그동안 해왔던 삽질을 써놓는 것으로 도움이 됐으면 좋겠다는 취지로 글을 쓰기로 했다.

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

TIL_42_with Wecode 032 React

Props?단어 뜻 그대로 컴퍼넌트의 속성값을 의미.props는 부모 컴퍼넌트로부터 전달받은 데이터를 지니고 있는 객체.props를 통해서 부모 컴퍼넌트로부터 자식 컴퍼넌트에게 State의 상태값, event handler를 넘겨줄 수 있다.class형 컴퍼넌트에서 p

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

Templee_0302) TodoLists Toggle Todo not sorted properly ( useCallback & state)

As I render, The TodoLists are sorted by 2 standards1) time left2) is done or nottodos that is 'not' done comes firstand after todos being divided int

약 12시간 전
·
0개의 댓글

[React] HTML태그 자동완성 적용하기

react를 공부하면서 JSX에서 html태그 자동완성이 적용되지 않는 문제가 발생했다.결론적으로 간단하게 해결할 수 있다.vscode 에디터에서 F1를 눌러 Open setting(JSON)를 연다.아래의 코드를 삽입한 후 저장이렇게하면 JSX에서 HTML코드 자동완

약 12시간 전
·
0개의 댓글

3. React Basics

Complete React Developer 3. React Basics Create React App facebook에서 만든 react app 제작 툴 babel, webpack등을 미리 설정해 초보 사용자들도 app을 쉽게 제작하도록 도와줌 npx create

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

[TIL] # 32 React | State |

오늘 하루주말 늦잠스터디 카페state로 활용한 로그인 버튼 활성화 해보기저녁 먹고 미션완료인라인 스타일로도 줄 수 있지만, 좋지 않은 코드? 라고 하셔서 클래스 네임으로 변수를 사용해 조작했다!!!삼항연산자로 id와 pw 둘다 0이 아니면 진한파랑으로 바뀌게했고,

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

TIL no.41 - React Hooks

Hooks Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동 할 수 있게 해주는 함수입니다. Hook을 왜 사용할까? 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기가 어렵다. 복잡한 컴포넌트들을 이해하

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

TIL_41_with Wecode 031 React

state?뜻 그대로 컴퍼넌트 내부에서 가지고 있는 컴퍼넌트의 상태값.화면에 보여줄 컴퍼넌트의 UI 정보를 지니고 있는 객체.예시) class형 컴퍼넌트에서 state를 정의클래스형 컴퍼넌트 안에는 필수적으로 render 함수가 필요하고 화면에 나타내고 싶은JSX 요소

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

[TIL] useRef

가끔씩 DOM을 직접 선택해야 하는 상황이 발생 할 때도 있다. 예를 들어 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 정말 다양한 상황이 있는데, 그럴 때 리액트에서 사용하는 것이 useR

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

[TIL] useState 이해하기

위 코드는 input에 입력하는 값이 하단에 나타나게 하고, 초기화 버튼을 누르면 input값이 reset되도록 구현한 것이다.input의 onChange 이벤트를 사용히고 이벤트에 등록하는 함수에는 이벤트 객체e를 파라미터로 받아와서 사용 할 수 있는데 이 객체의 e

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

[TIL]React Hooks - useRef

자바스크립트에선 getElementById, querySelector 등을 사용하여 html 돔 요소에 접근 가능하여 요소의 속성값을 바꾸는 것이 가능했다.리액트 함수형 컴포넌트에선 Ref API를 사용하여 useRef hook을 이용하여 돔 요소에 접근할 수 있다.

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

Toy Project : Teta's Card Maker

Toy Project(Teta's Card Maker)을 마무리하며, 돌아보기.

약 18시간 전
·
0개의 댓글

[React] 프론트엔드의 꽃 React 시작 전

묻지도 따지지도 말고 우선 리렉트 기본 세팅을 따라한다. > # React 환경세팅 1. node,npm 설치하기 아래 노드 사이트에 들어가서 OS맞는걸 다운받아서 설치하면, 아주 쉽게 node,npm 이 설치완료된다. (npm은 설치필요가 없다) https://n

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

React | 배경, 사용 방법

React는 사용자 인터페이스 (UI)를 만들기 위한 자바스크립트 라이브러리이다. 가상 돔 (Virtual Dom)을 사용하여 UI를 업데이트 하며 생태계가 발달되어있다.

어제
·
0개의 댓글

2. react + webpack + babel로 개발 환경 구축하기 (javascript)

저는 보통 yarn 을 사용하기때문에 이 예제에서 npm을 사용하지 않지만 둘 중 하나 아무거나 해도 상관없습니다! react: React 라이브러리를 불러온다.react-dom: DOM rendering을 위한 ReactDOM을 담고 있다.webpack: webpac

1일 전
·
0개의 댓글