본문 바로가기

내마음대로만들어보자/React58

함수형 Component 함수형 컴포넌트에 대해서 아직은 코드를 직접 짜기는 어렵지만 어떻게 생겼는지 익숙해지도록 봐두자! 2021. 7. 6.
Component (state, props) Component 란? Component는 클래스형과 함수형이 있다. 생김새만 다르고 동일하다고 봐도 무방하다. 리액트가 레고라면, Component는 블럭이라고 한다. 즉, 리액트를 구성하고 있는 하나하나를 컴포넌트라고 한다! 예를들어, 보통의 웹사이트를 조각내 본다면 ! 크게보면 header 영역, Contents영역, footer영역 으로 나눌수가 있다. 물론, 각 영역마다 세부적으로 들어간다면 더 영역이 나눠질순 있다. 이때, 나눈 조각 하나하나를 컴포넌트라고한다. 다시말하면, 이 컴포넌트는 웹 사이트의 조각이며, 이것들을 모아서 웹사이트를 구성하는 것이다. Component에서 데이터 관리 방법 - state 와 props state는 Component가 가지고 있는 데이터이다. 예를들어, he.. 2021. 7. 6.
JSX 사용법 JSX란? 리액트에서 뷰를 그리는 방법은 JSX문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그려준다. HTML을 품은 JS 를 JSX라고 한다. 자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI)작업을 편하게 할 수 있도록 한다. JSX 사용법 & 규칙 1. 태그는 꼭 닫아준다. 2. 무조건 1개의 엘리먼트를 반환하기 → 컴포넌트에서는 반환할 수 있는 엘리먼트는 1개다. 위와같이 작성한다면 오류가 발생하게된다. 반환할 수 있는 엘리먼트가 1개이므로 태그 관련 내용을 안으로 넣어줘야 오류가 안난다. 3. JSX에서 자바스크립트 값을 가져오려면? 위와같이 cat_name을 선언하고 자바스크립트 값은 중괄호 {} 를 이용해서 가져온다. 마찬가지로 map, 삼항연산자 등 그밖에 자.. 2021. 7. 6.
React 프로젝트 만들기 - 기본세팅 1. NVM 과 VSCODE 설치 2. 폴더 생성 macintosh HD → 사용자 → [내 컴퓨터 이름] 아래에 만든다. ※ NVM 으로 노드 버전을 관리해보자 NVM(Node Version Manager)을 왜 써야하는이유!!! nvm은 Node.js의 버전 관리자입니다. 우리 컴퓨터에 node를 설치하는 툴인데 수많은 버전을 마음대로 골라 설치할 수 있게 해주는 친구 여러버전의 Node.js 버전을 쉽게 관리 할 수 있도록 해준다. 3. nvm 설치 확인하기 vs code 터미널을 통해 nvm --version 으로 확인 4. nvm 으로 노드설치하기 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V.. 2021. 7. 5.