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

# React

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

3277개의 포스트
post-thumbnail

TIL-wecode 20일차

LifeCycle API를 사용할때는 언제일까?컴퍼넌트가 우리 브라우져에 나타날때, 업데이트 될 때, 사라질때 우리는 LifeCycle API를 사용합니다.LifeCycle API 사진을 보며 이해해보자출처:http://projects.wojtekmaj.pl/

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

TIL 11 | React -(2-2)CRA Setting

전편에 이어 CRA 초기 파일들에 대해 보려고 한다. index.html - index.js - App.js src/ index.html React 의 시작.( Entry Point ) ReactDOM.render( ,document.getElementById('roo

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

2020/12/05 가계부 만들기! - CRA

3일 전 간단한 가계부 프로젝트를 만들기로 했다.간단한거라 cra로 생성하려했는데 알 수 없는 에러들을 해결하느라 1시간 가량 걸려버렸다. 🤦‍♀️ 1로 생성했으나 빈 react app만 생성 되었다.yarn 또한 마찬가지..며칠 전에 회사에서 cra 할땐 분명 잘

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

TIL 11 | React -(2-1)CRA Setting

1. CRA 설치 > 1. 배경화면에 폴더를 하나 만든다. ( 필자는 React 라는 이름의 폴더를 만들었다.) 터미널을 연다. Desktop - React 라는 폴더로 진입한다 cd Desktop/React 폴더안에서 react를 실행할 파일을 만든다.( 필자는

약 9시간 전
·
0개의 댓글

[TIL] 20.12.05

주휴수당 적용 알고리즘ExtraPay.jsx 파일에 button 2개 생성두 버튼 초기 속성 모두 disabledprops로 전달받은 timeResult 값이 15 이상일 경우, 두 버튼 모두 enable 상태로 변경주휴수당 '포함' 버튼 클릭시 albaCalc.jsx

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

TIL- wecode19일차

리액트가 나온이유 바로 코드를 보도록 하자 >위의 코드를 해석해보자 +1을 누르면 id가 number인 dom 을 선택하여 속성을 1씩 더해주어라이다. 위의 코드는 간단하고 사용자와의 교류가 없어서 상관없겠지만 이러한 서로의 인터랙션이 자주발생하고 또한 이러한 이벤트

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

Useful tip Styled-components

styled-components 10가지 유용한 팁

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

TIL 10 | React -(1)Intro

현재, 프론트앤드개발자들 사이에서 가장 핫한, 리액트에 대해 배워보자 👍🏻 Why React? > 웹의 발전 갈수록 복잡해지고 다양해 지는 웹의 발전으로 인해, 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기위해 다양한 Fron

약 15시간 전
·
0개의 댓글

모달창 관련 디버깅 with Redux

현재 기업협업으로 리액트로 만든 웹페이지를 디버깅 중이다. 항상 현재 위치한 페이지를 입력하다 나가려고 하면 모달창이 뜨게 만들었다. 그러나, 유저가 포인트가 부족한 경우도 고려해서 그 경우에는 모달창이 아예 안뜨게 만드려는 것이 목표다. 1번째 케이스 지금 위 케

약 16시간 전
·
0개의 댓글

리액트를 다루는 기술

velog의 개발자기도 한 VELOPORT 김민준님의 '리액트를 다루는 기술' 책을 구입했다. 볼 책이 산더미처럼 쌓여가는 느낌이라 조금 걱정도 되지만... 블로그에 정리하며 공부를 진행해 볼까 한다.프론트엔드는 공부 하면 할수록 알아야 할게 정말 많은 것 같다. 열심

어제
·
0개의 댓글
post-thumbnail

[TIL] WebShare API로 공유하기 with React.js

특정 포스트나 결과를 sns 또는 링크로 공유하는 방법에 대해 검색하던 중 WebShare API라는 것을 알게 되어 해당 내용을 정리하려한다. process flow A가 B에게 특정 post를 공유할때에 생각한 flow는 대략 이렇다. 공유방식은 링크를 전달하여

어제
·
0개의 댓글
post-thumbnail

useState

지금까지 우리가 만든 컴포넌트는 동적으로 바뀌는 상황이 없었다. 즉, 값이 바뀌는 일이 없었다.이번에는 컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때 어떻게 구현할 수 있는지에 대해 알아보자.react 16.8 이전 버전에서는 함수형 컴포넌트

2일 전
·
0개의 댓글
post-thumbnail

props와 조건부 랜더링

props란, properties의 줄임말이다. props는 우리가 컴포넌트를 사용할 때 특정 값을 전달해주고 싶을 때 사용한다.코드를 통해 이해해보자.App.js로 들어와보자. 만약 우리가 Hello 컴포넌트에게 name이라는 값을 전달해주고 싶다고 가정해보자.nam

2일 전
·
0개의 댓글
post-thumbnail

JSX 기본 규칙

오늘은 리액트 컴포넌트를 만들때 사용하는 JSX에 대해 알아보자. JSX는 리액트에서 컴포넌트의 생김새를 정의할 때 사용하는 문법이다.얼핏보기에는 HTML처럼 생겼지만 사실은 Javascript이다. Babeld을 통해 XML 형태의 코드가 JS로 변환된다. 그런데,

2일 전
·
0개의 댓글
post-thumbnail

리액트 컴포넌트 만드는 방법

오늘은 어떻게 리액트로 컴포넌트를 만드는 지에 대해서 알아보도록 하자.우선, 리액트 파일에서 yarn start로 리액트를 실행시키고 src 폴더 아래에 Hello.js 파일을 생성한다. Hello.js가 바로 컴포넌트를 작성할 파일이 된다.Hello.js파일로 들어가

2일 전
·
0개의 댓글
post-thumbnail

TIL.30 React, State 로 login 구현

출저 React공식홈페이지 위코드 강의자료 React 란? 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리. View만 담당 : 리액트는 MVC(Model-View-Controller) Architecture (ex. Angular, Vue)와는

2일 전
·
0개의 댓글

TIL-wecode18일차

❓what is library 간략: 프로그램을 제작할때 필요한 기능 예시: 자동차 바퀴, 헤드라이트, 에어백❓what is framework 간략: 프로그램 기본 구조(뼈대) 예시: 자동차 프레임❓what is architecture 간략: 프로그램의 주요 구조 설계

3일 전
·
0개의 댓글
post-thumbnail

💙 React 활용법 핵심 요약

이 글은 "리액트를 다루는 기술(김민준, 길벗)"을 요약한 글입니다. 많은 예제 코드들이 이 책에서 인용되었습니다. 자세하고 정확한 내용을 확인하시려면 책을 직접 구매해 읽어보시기를 추천드립니다.

3일 전
·
0개의 댓글