IT/리액트
-
리액트 주요개념 - 조건부 렌더링IT/리액트 2022. 1. 16. 00:31
React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들고 애플리케이션의 상태에 따라 컴포넌트 중 몇 개만을 렌더링할 수 있습니다. 이때 if나 조건부 연산자와 같은 JavaScript 연산자를 사용합니다. 예를 들어 로그인 상태에 맞게 다른 문구를 보여줘야 한다면 다음과 같이 코드를 작성해야 합니다. //ConditionalRendering.js function UserGreeting(props) { return WelcomeBack!; } function GuestGreeting(props) { return Please sign up; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if(isLoggedIn) { return ; }..
-
리액트 주요개념 - 이벤트 처리하기IT/리액트 2022. 1. 15. 23:22
React 엘리먼트와 Dom 엘리먼트에서 이벤트를 처리하는 방식은 비슷하지만 문법적인 차이가 존재합니다. React DOM 캐멀 케이스(camelCAse) 사용 소문자 사용 JSX를 사용해 함수로 이벤트 핸들러 전달 문자열로 이벤트 헨들러 전달 예) Activate Lasers 예) ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( {this.state.isToggleOn ? 'on' : 'off'} ) } } 위의 constructor에서 바인딩해주지 않는다면 handleClick 메서드에서 this가 undefinde인식됩니다. 이렇게 바인딩하는 것은 JavaScript에서 함수가 작동하는 방식의 일부입니다. 일반적으로 onClick={..
-
리액트 주요개념 - State and LifecycleIT/리액트 2022. 1. 15. 18:50
State란? 동적인 데이터를 다루기 위해 사용되는 해당 컴포넌트가 다루는 값들을 의미합니다. props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어가 됩니다. props: properties의 줄임말로 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용함 리액트 주요개념 - 엘리먼트 렌더링에서 실습했던 시계 예제를 응용해 Clock 컴포넌트를 생성하여 완전히 재사용하고 캡슐화하는 방법을 설명드리겠습니다. 이 컴포넌트는 스스로 타이머를 설정할 것이고 매초 스스로 업데이트할 것입니다. function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } function tick() { ReactDO..
-
리액트 주요개념 - Component와 PropsIT/리액트 2022. 1. 15. 01:10
컴포넌트는 JavaScript 함수와 유사합니다. props(임의의 입력)을 받은 후 React Element(화면에 어떻게 표시되는지 기술)반환합니다. 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 벙법: JavaScript 함수 작성 function Welcome(props) { return Hello, {props.name}; } 위의 함수는 데이터를 가진 객체 인자를 받은 후 React 엘리먼트를 반환하기 때문에 유효한 React 컴포넌트입니다. 이러한 컴포넌트는 JavaScript 함수이기 때문에 함수 컴포넌트라고 호칭합니다. 또한, ES6 class를 사용하여 컴포넌트를 정의할 수 있는데 React 관점에서 볼 때 위, 아래 두 가지 유형의 컴포넌트는 동일합니다. class ..
-
리액트 주요개념 - 엘리먼트 렌더링IT/리액트 2022. 1. 15. 00:05
엘리먼트(Element)란? React 앱의 가장 작은 단위로 화면에 표시할 내용을 기술합니다. 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있습니다. 이때, 객체는 type(문자열 혹은 컴포넌트 함수, 클래스) 필드와 props(객체) 필드를 가집니다. 일반적으로 JavaScript의 React.createElement() 함수 또는 JSX의 태그 문법으로 작성합니다. 돔 엘리먼트: 엘리먼트의 type이 태그 이름에 해당하는 문자열인 경우 해당 태그를 가진 DOM 노드를 표현하며, props 정보를 통해 해당 노드의 속성들을 표현 예) DOM에 엘리먼트 렌더링하기 vscode에서 리액트를 생성하면 html 파일에 다음과 같은 코드가 생성됩니다. 이 안에 들어가는 ..
-
리액트 주요개념 - JSXIT/리액트 2022. 1. 12. 23:59
리액트 홈페이지의 문서를 이용해 공부한 내용입니다. https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 실습을 하기 전 리액트를 설치해야합니다. 설치방법은 따로 포스팅하지 않고 제가 참고한 블로그 링크를 공유하겠습니다! https://leirbag.tistory.com/105 React 설치 방법 1. node.js를 설치합니다. https://leirbag.tistory.com/104 node.js(16.13.1 LTS) 설치 및 express 프레임워크 실행 / nodemon 포함 1. node.js를 설치합니다 https://..
-
리액트 개요IT/리액트 2022. 1. 12. 22:49
리액트(React)란? 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 리액트 역사 리액트의 역사를 알기 전 알아야할 개념을 우선 설명하겠습니다. DOM (Document Object Model) https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML (en-US) 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 developer.mozilla.org 가상 DOM https://velog.io/@mollog/R..