1. 웹개발/1_1_5 React JS 검색 결과

해당 글 52건

[React] Ref란?

Ref는 'reference'의 약자로, '참조'라는 뜻입니다. react에서 element의 값을 얻거나 수정할 때 보통 javascript, jquery를 사용합니다. 이때 id나 class와 같은 속성으로 element에 접근합니다. Ref를 사용하면 element가 참조하는 변수에 접근해 변경하고 element를 제어할 수 있습니다. [Ref를 사용해야 할 때] 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. 선언적으로 해결될 수 있는 문제에서는 Ref 사용을 지양해야 합니다. 예를 들어, Dialog 컴포넌트에서 open()과 close() 메서드를 두는 대신, isOpen 이라는 pr..
1. 웹개발/1_1_5 React JS 2022. 1. 2. 12:27

[React] onKeyDown, onKeyUp, onKeyPress 차이

기존의 자바스크립트에서는 onkeydown, onkeypress, onkeyup 명으로 이벤트를 사용했었습니다. 하지만, react에서는 onKeyDown, onKeyPress, onKeyUp 이벤트는 camelCase 형식의 명칙을 사용합니다. onKeyDown, onKeyUp은 키를 누르고 떼는 동작 자체에 반응합니다. 문자, 숫자, Ctrl, Shift, Alt, F1~F12, Scroll Lock, Pause, Enter를 인식하고 한/영, Print Screen은 인식하지 못합니다. onKeyPress는 위와 달리, 문자가 실제로 입력됐을 때 반응합니다. Ctrl, Shift, Alt, F1~F12, Scroll Lock, Pause, Enter, 한/영, Print Screen 등을 인식하지 ..
1. 웹개발/1_1_5 React JS 2022. 1. 1. 12:52

[React] 함수형 컴포넌트 사용하기

함수형 컴포넌트 클래스형 컴포넌트는 state, 라이프 사이클 기능, render 함수 등을 제공해줍니다. 함수형 컴포넌트는 클래스형 컴포넌트와 달리, state가 없고 생명주기 함수를 사용할 수 없습니다. 하지만, 함수형 컴포넌트는 이러한 기능들을 제공하진 않지만 hook의 도입으로 해결이 가능하게 되었습니다. 공식문서에는 클래스형 컴포넌트보다는 함수형 컴포넌트와 hook을 사용하는 것을 권장하고 있습니다. 상위 컴포넌트에서 props와 context를 파라미터로 전달받아 사용하기 때문에 render() 함수가 없으므로 return만 사용해 화면을 그려줍니다. 따라서, 클래스형 컴포넌트보다 선언도 편하고 메모리 사용도 덜한 효과를 갖고 있습니다. 소스 예제 함수형 컴포넌트를 사용하는 간단한 코드를 보며..
1. 웹개발/1_1_5 React JS 2021. 12. 19. 16:53

[React] props 기본값으로 정의하기

props 란? React가 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props” ("properties"의 줄임말)라고 합니다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체입니다. props 기본값으로 정의하기 defaultProps를 이용하여 props의 기본값을 정의해주시면 됩니다. 정말 간단한 코드를 보며 살펴보겠습니다. App.js (상위 컴포넌트) import './App.css'; import TestComponent from './Component/TestComponent' function App() { return ( ); } export default App; TestComponent.js (하위 컴..
1. 웹개발/1_1_5 React JS 2021. 12. 16. 12:17

[React] jQuery 사용 방법

이번 글에서는 React에서 jQuery를 사용하는 방법에 대해서 알아보도록 하겠습니다. jQuery는 가장 인기 있는 자바스크립트 라이브러리인데요. 이벤트 처리, 애니메이션 등 자바스크립트의 기능을 간단하고 빠르게 구현할 수 있도록 지원해주고 있습니다. 이러한 jQuery를 React에서 사용하려면 어떻게 해야되는 지 알아보도록 하겠습니다. 1. CMD창을 열어 해당 프로젝트 경로로 이동해서 [npm install jquery]를 입력합니다. 2. jquery를 임포트해줍니다. import $ from 'jquery'; 이러면 세팅이 끝나 제이쿼리 사용이 가능합니다. 아주 간단하죠? 확인해봅시다. 다음은 h2 태그를 클릭하면 알림창이 나오는 예제입니다. import React, { Component }..
1. 웹개발/1_1_5 React JS 2021. 12. 14. 17:35

[React] props란?

props 개념 React가 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props” ("properties"의 줄임말)라고 합니다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체입니다. props가 어떤식으로 코드에서 사용되는지 간단한 예제를 통하여 알아보도록 하겠습니다. 아래의 예제는 "hello, hayan”을 렌더링하는 예시입니다. const Welcome = (props) => { return hello, {props.name} } ReactDOM.render( , document.getElementById('root') ); // 출력 결과 hello hayan 위의 예시는 다음과 같은 일들이 일어납니다. 1. ..
1. 웹개발/1_1_5 React JS 2021. 7. 30. 10:36

[React] state란?

state 개념 state는 함수 내에 선언된 변수처럼 컴포넌트의 렌더링 결과물에 영향을 주는, 데이터를 갖고 있는 객체입니다. 아래의 코드를 통하여 state가 어떤식으로 코드에서 사용되는지 알아보도록 하겠습니다. class Welcome extends React.Component { constructor(props) { super(props); this.state = {name: 'mindragon'}; // 2. 직접 state를 세팅 } render() { return( Hello, {this.state.name} // 3. state의 name 값 호출하며 렌더 ); } } ReactDOM.render( , // 1. Welcome 컴포넌트 호출 document.getElementById('ro..
1. 웹개발/1_1_5 React JS 2021. 7. 29. 17:02

[React] && 연산자로 If문 처럼 표현하기

JSX 안에는 중괄호를 이용해서 표현식을 포함 할 수 있습니다. 그 안에 JavaScript의 논리 연산자 &&를 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있습니다. function GetUnreadTextInfo(props) { const unreadTexts = props.unreadTexts; // ['react', 'test', 'hello'] return ( Hello! {unreadTexts.length > 0 && // unreadTexts.length = 3 You have {unreadTexts.length} unread texts that are {unreadTexts.join(', ')} } ); } const textZip = [ 'react', 'test', 'hello'] Re..
1. 웹개발/1_1_5 React JS 2021. 7. 28. 16:04