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

# React

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

1649개의 포스트
post-thumbnail

styled-components: props

props위의 코드 한줄은 아래를 함축시킨 ES6 문법입니다.:즉, color값이 있으면 전달 받은 color를 적용하고 없으면 blue를 적용하라는 뜻입니다.<Block/>컴포넌트는 color라는 props를 전달하고 있으므로 녹색 텍스트로 블록을 만들 수 있습

약 3시간 전
·
0개의 댓글

styled-components: injectGlobal과 재사용

흔히 reset.css로 많이 사용했던 것 처럼 사용합니다.import styled, {injectGlobal} from "styled-components";를 추가해주면 사용할 수 있습니다.여기 <Button/>컴포넌트의 기본 스타일이 있습니다.<Ancho

약 3시간 전
·
0개의 댓글

styled-components: nesting

nesting으로 인해 ${Card}의 배경색상은 blue가 표시됩니다.${Card}:last-child, ${Card}:nth-child(1), ${Card}:not 등 CSS처럼 사용가능합니다.

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

[React] fetch/lifecycle에 대해 알아보자!

>React Monster 과제를 통한 fetch/lifecycle를 이해하고 map과 filter적용해보기 ** 컴포넌트를 생성할 때는 constructor -> componentWillMount -> render -> componentDidMount 순으로 진행된

약 5시간 전
·
0개의 댓글

React - Django서버와 통신하기

API를 호출하여 데이터를 가공하기 위해선 fetch 또는 axios라는것을 사용해야 한다. 저번에는 axios를 사용하여 API를 호출해봤지만, 이번에는 fetch연습을 위해 fetch를 사용하여 API를 호출해봤다. fetch의 기본형식은 다음과 같다. fetch안에 적힌 API 주소를 통해 네트워크에서 JSON파일을 가져와서 콘솔을 찍는다. 간단한...

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

책 한권으로 시작하는 react (13)

React 상태 관리 Context API에 대해 알아보겠습니다.

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

React.js Project 개발 환경 설정하기 2편 : Yarn 설치 & IntelliJ IDEA로 개발 시작하기

❗️이 시리즈는 React.js로 이미 작성된 프로젝트의 업무 인수인계 및 개인 기록용으로 작성되었습니다. React.js 프로젝트를 새로 만드는 과정은 담겨있지 않습니다. 혹시 잘못된 내용이 있다면 언제든지 댓글 부탁드립니다! 😁 Node.js 설치가 끝났다면 Y

약 9시간 전
·
0개의 댓글

리덕스+리액트 Redux with React #8 useSelector() useDispatch() hooks

리액트에서 리덕스를 사용하기 위해서는 고차 컴포넌트(HOC, 이하 HOC) connect() 로 컴포넌트 감싸기mapStateToProps 작성mapToDispatchToProps 작성위 과정을 해야만 리덕스 스토어에 접근할 수 있었다. 리덕스에서 hooks를 지원하게

약 9시간 전
·
0개의 댓글

리덕스+리액트 Redux with React #7 덕스패턴

연관된 action-types, action-creater, reducer 를 하나의 파일에 작성reducer는 export default 로 내보내기action-creater는 export 로 내보내기action-types는 접두사+액션이름으로 작성(예: todos/

어제
·
0개의 댓글

Axios

Installing Axios What is Axios? > Axios is a "promise based HTTP client for the browser and node.js" So what does this mean? What is a promise and w

어제
·
0개의 댓글

리덕스+리액트 Redux with React #6 immer 사용하기

객체, 배열의 불변객체 유지하기 객체 : 전개연산자 사용(...) 배열 : 전개연산자 사용(...), concat, filter, map 등 함수사용 (push, splice등 인덱스 직접 수정 안됨!) 리덕스나, state를 객체로 변경하게 되면 아래와 같은 코

어제
·
0개의 댓글

리덕스+리액트 Redux with React #5 createReducer()

리덕스 툴킷 문서-createReducer리듀서를 작성하다보면 switch 문으로 작성하게 되는데 createRedicer()는 switch문 보다 더 단순한 구조로 리듀서를 작성하도록 도와주는 함수다.

어제
·
0개의 댓글
post-thumbnail

React - #기본 개념 정리 TIL 01

Facebook에서 제공해주는 라이브러리. AngularJS, Vue 등과 함께 많이 사용되고 있지만, 구조화 방식이 다른 것이 특징이다.AngularJS, Vue 등이 대표적인 프레임워크. 위 프레임워크들은 이벤트가 발생했을 때, 모델에서 데이터를 처리하여 그 정보를

어제
·
0개의 댓글

React - 여러개의 input 감지하기

React에서 input의 value를 감지하기 위해서는 input에 onChange 이벤트를 주고 state에 저장하는 방식을 사용해야 한다. 저장은 이벤트가 발생하는 target의 value를 저장하는데 input이 하나일 경우는 상관없지만 input이 2개 이상일 경우 각각의 input에 대해 다른 함수를 준다는 것은 너무나 귀찮은 작업이다. 개발자는...

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

[React]setState와 life cycle의 관계

(아래 표는 그릴수 있어야 한다.)setState를 사용하는 이유는 React의 life cycle을 사용하기 위해서이다. 단순히 this.state.name='김병관' 값입력식으로 state를 입력하면 React가 인식을 하지 못한다.setState메소드를 이용해야지

1일 전
·
0개의 댓글

useSelector(상태조회), useDispatch(액션 디스패치)

리덕스 스토어와 연동된 컨테이너 컴포넌트를 만들 때 connect함수 사용 connect 함수 대신 hooks 사용

1일 전
·
0개의 댓글

redux-actions 리덕스 관리 편하게

redux-actions을 사용하면 액션 생성 함수와 리듀서를 더 짧은 코드로 작성 할수 있다. redux-actions 미 적용 redux-actions 로 바꾼 코드 yarn add redux-actions

1일 전
·
0개의 댓글

React Hooks #12 Class-Component를 고려한 커스텀 훅

기존 클래스형 컴포넌트에서 커스텀 훅을 사용할 수 있는 방법고차 컴포넌트(이하 HOC) or 랜더 속성값(render-props) 를 사용하여 클래스형 컴포넌트에서 커스텀 훅 사용참고 : 책 : 실전 리액트 프로그래밍/이재승 저

2일 전
·
0개의 댓글

React Hooks #11 Class-Component life-cycle, hooks로 구현하기

componentDidMount() 보다 먼저, 최초 1회만 실행되어야 한다.useEffect로 componentDidMount() 구현하기(https://velog.io/@hwang-eunji/React-Hooks-3-useEffect\[useEffect로

2일 전
·
0개의 댓글

React Hooks #10 useLayoutEffect(), useDebugValue()

useEffect() 는 비동기useLayoutEffect() 는 동기useLayoutEffect() 훅의 로직에서 연산이 많으면 브라우저가 먹통이 될 수 있으니 주의!앵간하면 useEffect() 사용하고, 렌더링 직후 돔요소의 값을 읽는 경우 useLayoutEff

2일 전
·
0개의 댓글