목록IT 기술/[React] 기본 (26)

Miracle Morning, LHWN

5. 바뀌는 값을 관리해주는 useState

# 참고로 리액트 16.8 이전 버전에서 함수형 컴포넌트에서는 상태를 관리할 수 없었는데, 리액트 16.8 에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. ​ # useState도 이 Hooks 중 하나! ​ # 리액트에서 엘리먼트에 이벤트를 설정해줄 때 onClick={onIncreate} 처럼 설정을 해주는데, 이때 함수형태를 넣어주어야 하지, 함수를 실행하면 안된다. ​ onClick={onIncrease} (O) onClick={onIncrease()} (X) → 렌더링을 하는 과정에서 함수가 호출되어버리기 때문 ​ # 컴포넌트에서 동적인 값을 '상태(state)'라고 한다. import React, { useState } from 'react'; fun..
IT 기술/[React] 기본 2021. 5. 24. 15:10
4. 조건에 따라 다른 컴포넌트를 렌더링하기

아래 코드에서 isSpecial 값에 따라 컴포넌트의 좌측에 * 을 표시해보자! (true 값은 자바스크립트 값이기 때문에 { }로 감싸서 표현해주어야 한다.) import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( ) } export default App; 첫 번째 방법, 삼항연산자를 이용하기 // Hello.js import React from 'react'; function Hello({ color, name, isSpecial }) { return ( { isSpecial ? * : null } Hello {name} ); } Hello.defaul..
IT 기술/[React] 기본 2021. 5. 24. 15:08
3. props를 이용해서 컴포넌트한테 값 전달해보기

# props (properties) : 어떠한 값을 컴포넌트에게 전달해줘야 할 때! 사용 // App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; // Hello.js import React from 'react'; function Hello(props) { return 안녕하세요 {props.name} } export default Hello; 이때 props는 객체이므로 위 코드에서 name을 조회할 때 props.name 으로 접근! # 그럼 props가 여러 개 일 때에는 일일이 받아야 할까? ​ 아니다. 이럴 때에는 비구조화 할당(혹은 구조 분..
IT 기술/[React] 기본 2021. 5. 24. 15:06
2. JSX가 무엇이며, 기본 규칙은 무엇일까

# JSX 는 리액트에서 생김새를 정의할 때 사용하는 문법. HTML처럼 생겼지만, 실제로 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel이 JSX → JavaScript로 변환을 해줌! Babel은 자바스크립트의 문법을 확장해주는 도구. 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로써 구형 브라우저의 환경에서도 제대로 실행될 수 있게 해주는 역할 ㄴURL : https://bit.ly/2wMpkk2 https://react.vlpt.us/basic/04-jsx.html # JSX 가 JavaScript로 제대로 변환이 되려면 꼭 지켜주어야 하는 몇 가지 규칙! 1. 태그는 반드시 닫아야 한다. HTML에서 in..
IT 기술/[React] 기본 2021. 5. 24. 14:59
1. 첫 React Component

// Hello.js import React from 'react'; function Hello() { return Hello React! } export default Hello; # 리액트 컴포넌트는 (1) 함수 형태로 작성하는 방법, (2) 클래스 형태로 작성하는 방법이 있다. # 리액트 컴포넌트에서는 XML 형식의 값을 반환해줄 수 있음 → JSX export default Hello; 위 코드는 'Hello'라고 정의한 컴포넌트를 내보내겠다!는 의미. → 다른 컴포넌트에서 Hello를 불러와서 사용할 수 있다. UI 조각이라고 이해하면 쉬움! (하단 참고) → 컴포넌트를 여러 번 재사용 할 수도 있다. // App.js import React from 'react'; import Hello fr..
IT 기술/[React] 기본 2021. 4. 28. 15:38
0. React 시작하기

JavaScript 는 "DOM 을 직접 건드리며 업데이트 하는 방식" 이고, React 는 "아예 다 날려버리고, 처음부터 새로 만들어서 보여주는 방식" 이다. # React에서는 Virtual DOM이라는 것을 사용하기 때문에 속도의 걱정이 없다. (Virtual DOM은 실제 보여지는 DOM이 아닌, 메모리에 가상으로 존재하는 DOM) → 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해 렌더링! → 기존에 보여지고 있는 DOM과 비교하여 차이점을 감지한 후, 이를 실제 DOM에 patch! # Node.js : Javascript Runtime. > npm​ : Node.js를 설치하면 같이 설치되는 Package Manager. 프로젝트에 사용되는 라이브러리를 설치하고, 해당 라이브러리..
IT 기술/[React] 기본 2021. 4. 28. 15:08
Prev 1 2 3 Next