React

React를 사용하려면 일단 Node.js가 설치되어있어야 한다.Node.js가 설치되었다면 npm install create-react-app <앱 이름>, cd <앱 이름>, npm start을 해서 개발 환경을 셋팅해준다.React에는 JSX(JavaS

리액트에서 반복문 없이 배열의 데이터를 반복적으로 사용하고자 할 경우에는 아래와 같이 사용할 수 있다.위 데이터를 map사용하여 작성해보면 다음과 같다.다만 위처럼 key값 없이 map을 사용하게 되면 다음과 같이 콘솔창에 경고가 뜬다.key 값으론 key: 1 이런식

1부터 100까지 들어있는 Array가 있을 때, 10의 배수인 경우 출력하지 않고 5의 배수인 경우 '5의 배수' 라는 텍스트를 포함한 button 출력하기. 그 외의 경우 해당 숫자가 들어 있는 button 출력하기.원하는 대로 동작하는 것을 볼 수 있다.

이미 만들어진 레이아웃을 복사 붙여넣기 식으로 간편하게 사용하여 개발할 수 있도록 도와주는 라이브러리google에 react bootstrap이라고 치면 다음과 같이 나온다.Get Started 를 클릭하면 부트스트랩을 설치할 수 있는 명령어가 나온다.$ npm ins

웹페이지에서 상세 페이지를 보여주거나 할때, html로 구현하게 되면 보통 새로운 html 파일을 생성해서 보여주곤 한다.그러나 리액트는 html 파일을 하나만 사용하여 html과는 다른 방식으로 상세페이지를 구현한다.새로운 컴포넌트를 만들어 상세 페이지 내용을 채운

Redux는 컴포넌트간 props없이 state의 공유를 가능하게 해준다. props 없이 state 공유가 가능한 이유 Redux를 설치하면 모든 스테이트를 보관하는 자바스크립트 파일을 만들어준다. 모든 컴포넌트들이 그 파일에서 직접 스테이트를 가져다가 사용할 수

store.js의 state 변경하는 법 Redux는 useState()의 setState와는 다른 방식으로 state를 수정해야한다. Redux의 state 변경하는 법은 다음과 같다. 1. store.js 파일의 해당 state의 createSlice 안에서

기사를 렌더링하는 리액트 미니 토이프로젝트를 진행하게 됐다. 이전에 자바스크립트로 동일하게 작업했던 프로젝트를 이번에는 리액트로 구현하는 것이다. 접근 방법 맨 처음 자바스크립트 토이 프로젝트를 시작했을 때에는, 시간이 없다는 생각에