본문 바로가기
클라이언트/React
 (48)
[리액트(React)] 조건부 렌더링(Conditional Rendering) // 조건부 렌더링, Conditional Rendering - 조건부 렌더링 - 조건(조건문)에 따라 일부 컴포넌트만 렌더링할 수 있다. - {} 안에 && 연산자나 삼항 연산자를 활용하여 조건부 렌더링을 할 수 있다. // && 연산자 사용 {!selectedTopic && Please select a topic.} {selectedTopic && ( {EXAMPLES[selectedTopic].title} {EXAMPLES[selectedTopic].description} {EXAMPLES[selectedTopic].code} )} //삼항 연산자 사용 {!selectedTopic ? ( Please select a topic. ) : ( {EXAMPLES[selectedTopic].title} {..
[리액트(React)] 이벤트 핸들러 // 이벤트 핸들러(이벤트 리스너) - 이벤트를 실행 및 처리하는 것 - 어떤 사건이 발생하면 사건을 처리한다. - 이벤트 함수명은 handle+행위 또는 행위+handler로 짓는 것이 일반적이다. ~ handleClick, clickHandler ... - 화살표 함수 또는 익명 함수로 이벤트 함수를 정의하여 커스텀 인자를 전달할 수 있다. // 화살표 함수 함수명(인자)}/> //익명 함수 - 클래스형 컴포넌트에서는 this를 직접 바인딩 해주거나 화살표 함수를 사용하여 바인딩해야 한다. - 함수형 컴포넌트에서는 함수 안에 함수로 정의하거나 화살표 함수를 사용하여 정의한다. // 클래스형 컴포넌트 - this 직접 바인딩 import React from 'react'; const styles = {..
[리액트(React)] Hook // Hook - function 컴포넌트에서 class컴포넌트와 동일한 기능을 사용할 수 있게 해준다. - 이름 앞에 use를 붙여 hook임을 나타낸다. - 최상위 컴포넌트에서만 호출해야 한다. - 렌더링될 때마다 늘 같은 순서로 호출되어야 한다.(조건문x) - 중첩된 함수나 if문 등에서 사용할 수 없다. // useState - state를 사용하기 위한 hook const [ 변수명, set변수명 ] = usetState(초기값); import React, { useState } from 'react'; function Counter(props) { const [count, setCount] = useState(1); return ( 총 {count}번 클릭했습니다. setCount(count ..
[리액트(React)] State, Lifecycle // State - Component의 변경 가능한 데이터 - 개발자가 직접 정의한다. - 렌더링이나 데이터 흐름에 사용되는 값만 포함해야 한다. > 불필요한 컴포넌트 렌더링 방지 - JavaScript 객체 - 함수형 컴포넌트, 클래스형 컴포넌트에서 모두 사용된다. import React from 'react'; const styles = { wrapper: { margin: 8, padding: 8, display: 'flex', flexDirection: 'row', border: '1px solid grey', borderRadius: 16, }, messageText: { color: 'black', fontSize: 16, }, }; class Notification extends React...
[리액트(React)] Component, Props // 컴포넌트, Component - 사용자 인터페이스를 구성하는 독립적이고 재사용 가능한 부분 - 여러 컴포넌트들을 조립하여 UI를 구성한다. - 컴포넌트명은 항상 대문자로 시작해야 한다. - 컴포넌트 함수에서는 항상 렌더링 가능한 값이 반환되어야 한다. - 컴포넌트 간의 연관성이 매우 높거나 반드시 함께 있어야만 작동하는 경우가 아니라면 별도의 컴포넌트는 별도의 파일에 저장하는 것이 좋다. ● 함수형 컴포넌트(Functional Components) function Greeting(props) { return ( {props.name}입니다. ); } ● 클래스형 컴포넌트(Class Components) class Greeting extends React.Component { render() { re..
[리액트(React)] Elements Rendering // Elements - 리액트 앱을 구성하는 가장 작은 단위 - 자바스크립트 객체 형태 - 사용자 인터페이스를 구성한다. - 한 번 생성되면 변경할 수 없다. // Elements Rendering - Elements를 통해 구성된 UI를 화면에 표시하는 과정 - Virtual DOM에 렌더링한 후 Browser DOM에 렌더링한다. > 최소한의 변경만 Browswer DOM에 반영할 수 있기 때문에 더 효율적! import React from 'react'; function Clock(props) { return ( 나무의 하루입니다. 현재 시간: {new Date().toLocaleTimeString()} ); } export default Clock; import React from 'react'..
[리액트(React)] JSX // JSX - A syntax extension to JavaScript > 자바스크립트 확장 문법 - JavaScript + XML / HTML const hi = Hello! - 간결한 코드 > 가독성 향상 - Injection Attacks를 방어할 수 있다. import React from 'react'; function Post(props) { return ( {`안녕하세요? ${props.name}입니다.`} {`${props.category} 공부 중입니다.`} ); } export default Post; import React from 'react'; import Post from './Post'; function Blog(props) { return ( ); } export defau..
React.js란? (개념, 설치 및 설정) // React - 웹 또는 네이티브 사용자 인터페이스를 위한 라이브러리 - 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리 - 빠른 update를 위해 Virtual DOM 을 사용한다. - 컴포넌트의 조합으로 개발한다. - 재사용성을 높여 개발 기간을 단축할 수 있고 유지보수가 용이하다. - 오픈소스 (https://github.com/facebook/react) GitHub - facebook/react: The library for web and native user interfaces. The library for web and native user interfaces. Contribute to facebook/react development by creating an account on ..

티스토리툴바