오늘은 리액트를 시작한다.리액트를 시작하기에 앞서 script src를 지정해줘야한다.React란?React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 Javascript 라이브러리이다. "컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여
오늘은 JSX에서 배울 것 이다. 이전에 배웠던 아래의 문법을 더 쉽게 쓰는 방법이다.우선 JSX 방식으로 다시 코딩하면 아래와 같다.하지만 위와 같이 작성하면 에러가 뜨는 것을 볼 수 있다.에러가 뜨는 이유는 컴퓨터가 JSX 문법을 읽지 못하는 것이다. 위와 같이 J
ES6에서는 객체를 반환하는데 있어서 불필요한 반복을 없앴다. key, value 형식으로 object의 프로퍼티를 추가했다면, shorthand방식으로도 가능해졌다. 함수에서는 반환하는 형식에서 뿐만 아니라 객체 그 자체를 정의하는데에도 사용할 수 있다. 물론, 객체
먼저 React를 시작하기전에 Node.js를 설치해 환경을 구성해줘야 한다.설치방법 부터 알아보자.Node.js 설치 사이트를 먼저 들어간다.16.18.0 LTS를 눌러 recommanded for most users를 설치한다. 다 설치가 되었다면 설치가 되어있는
Component의 사전적 정의는 독립적이고 재사용 가능한 코드 비트이다. Javascript 함수와 동일한 목적을 제공하지만 분리되어 작동하고 HTML을 반환한다.Component는 클래스 구성 요소와 함수 구성요소의 두 가지 유형으로 제공되며 이 자습서에서는 함수
React 컴포넌트의 현재 상황에 대한 정보를 나타내기 위해 React에서 사용하는 일반 Javascript 객체이다. state는 함수에 선언된 변수와 마찬가지로 구성 요소에서 관리되지만 차이점은 "정상"변수는 함수가 종료될 때 "사라지는" 반면,state는 Reac
React로 구현한 가위바위보 게임이다. Let's play 버튼을 눌러 게임을 시작한다.유저가 가위, 바위, 보 중에 하나를 선택하면 컴퓨터는 랜덤으로 가위, 바위, 보 중에 하나를 나타낸다. 유저나 컴퓨터중 이겼다면 테두리와 글자가 녹색으로 졌다면 빨간색 비겼다면
class componet가 function component 보다 더 쓰기에 어렵다. 하지만 function component가 나왔음에도 class componet가 더 많이 사용됐다.그 이유는 1\. 많은 개발 문서들이 class componet로 작성이 되어있다
리액트는 3개의 Life Cycle을 가지고 있는데 그 3가지는 Mounting, Updating, Unmounting 있다. Mounting은 컴포넌트가 시작될 때Updating은 state가 업데이트 되고 UI가 없데이트 될 때Unmounting은 컴포넌트가 종료될
🧶 Router Router는 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종유의 라우터 컴포넌트를 제공한다.
Redux는 React에 라이브러리이다.리액트는 단방향 통신이라 부모 컴포넌트가 자식 컴포넌트에게 props를 전달해 주는 방식이다.자식끼리 주고 받을 때도 부모를 거쳐 전달 해야한다. 그렇다면 props를 엄청 많이 써야한다는 것이다.하지만 redux를 쓴다면 상태저
Redux는 UI에서 Action이 생기고 이 Action을 dispatch가 받아 던져주고 Reducer가 받아 작업 지시를 return을 하면 state가 받아주는 원리이다. 이 Redux에게 단점이 있다. 단점이 무엇이냐면 비동기적 처리를 하지 못하는 것이다.Re
Redux toolkit를 사용하려면 설치를 해야한다Redux toolkit을 설치하면 자연스럽게 Redux가 설치된다.이전문법이전 문법은 단점이 있다.매번 유니크한 이름을 만들어줘야 한다.매번 if else 또는 switch를 만들어줘야 하고이름에 오타도 생길 수 있