React

오늘은 React에 대해서 적어 볼려고 한다.처음 배운 React는 이해가 어려워 복습차원에서 적어본다먼저 React란Javascript 라이브러리 이고 사용자 인터페이스 즉, UI를 만드는데 사용된다.또한 React는 SPA로서 HTML문서 하나를 가지고 JSX 문법

React-State

리액트를 다루는 기술이란 책을 읽고 정리한 React 정리본

오늘도 리액트를 다루는 기술 책을보며 React의 기초에 대해서 복습해 본다. >State 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의마한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이여, 컴포넌트 자신은 해당 pr

리액트를 다루는 기술 3탄 까지 와버렸네요...이번편은 2탄에서 이어지는 편입니다.한 컴포넌트에서 useState 여러 번 사용하기useState는 한 컴포넌트에서 여러번 사용이 가능합니다.해당 컴포넌트에는 state를 하나더 추가하여 message 의 색상을 변경해주

state를 사용할 때 주의 사항 (배열 & 객체 업데이트 방식)state의 값을 변경해 주기 위해서는 setState를 통해 전달받은 셰터 함수를 사용해야하는데 배열과 객체를 업데이트 하기위해서는 일반적인 업데이트 방식과는 차이가 있다위의 컴퍼넌트를 보면 let ch

4편에서 배열과 객체의 state사용법에 대해서 적을려고했는데 배열부분만 적었다. 객체 부분은 후에 좀더 react에 대해서 알고 난뒤에 적어야함 (어려움)이번편은 이벤트 핸들링에 대한 복습이다.이벤트 핸들링시 주의사항본격적인 이벤트 핸들링 복습이전 주의 사항에 대해서

복습할 내용: 자바스크립트 배열의 map() 메서드 & 함수 컴퍼넌트에서 map() 메서드를 이용한 내용추가 기능Javascript - Array.prototype.map()Array(배열)의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다.m

라이프사이클 메서드의 이해라이프사이클은 총 세 가지, 마운트, 업데이트, 언마은트 카테고리로 나뉜다.마운트 -> 업데이트 -> 언마운트마운트DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트 라고한다.컴포넌트 만들기 -> constructor -> getDerive

콜백함수에서 콜백 지옥에 빠지지 않기위한 Promise 사용 방식에 대한 복습위와같이 then을 이용해서도 할 수 있지만 보다 가독성과 쉽게 사용하기 위해서async과 await을 이용하여 나타낼수 있다.위와 같은 형식으로 async 문법을 이용해서 콜백 함수로 불러올

리액트에서 useState 를 사용하는 이유리액트가 사용자의 인터렉션을 최소화 시켜주기위해 사용하는웹 어플리케이션이다.기존에는 사용자의 ui가 변경될때 웹의 새로고침이 필요하였는데리액트의 state를 사용하게 되면값이 바뀐다고 하더라도 새로고침없이 사용자에게 변경된

리액트 타입스크립트 프로젝트 생성 npx create-react-app \[프로젝트 명] --template typescript컴포넌트 생성index.js 에 npm에 배포할 컴포넌트 설정tsconfig.json 에 npm 배포전 환경 설정4-1. 해당 tsconfig

리액트의 JSX 문법의 제한사항과 그에 대한 해결방법

모달같은 컴포넌트는 모달 전체가 렌더링 되는 곳에 실제로 렌더링 되어서는 안된다.실제 렌더링 되는 곳위와 같이 렌더링 되어서는 안된다. → 물론 렌더링 되었을때 위와 같이 되어도 사용자 UI에는 모달창이 보이지만 코드 적으로 이는 좋은 코드는 아니다.프로젝트에서 Mod

구글 로그인을 리액트에서 구현하기위한 방법을 적은 포스트

리엑트 리덕스 설치 명령어store 생성store를 생성할 때 반드시 주입해 주어야하는것은 Reducer 이다.reducer의 역할은 store안에있는 state를 어떻게 바꿀것인가를 결정하는 역할을 한다.reducer는 두개의 파라미터를 받는다provider, use