반응형 분류 전체보기375 [React] Hooks - useMemo(), useCallback(), useRef() ③ useMemo() : Memoizes value 를 리턴하는 Hook useMemo() 사용법 const memoizedValue = useMemo( () => { // 연산량이 높은 작업을 수행하여 결과를 반환 return computeExpenseiveValue(의존성 변수1, 의존성 변수2); }, [의존성 변수1, 의존성 변수2] ); 의존성 배열에 들어있는 변수가 변했을 경우에만 새로 create 함수를 호출하여 결과값을 반환하며, 그렇지 않은 경우에는 기존 함수의 결과값을 그대로 반환한다. useMemo() Hook 을 사용하면 component 가 다시 렌더링 될 때마다 연산량이 높은 작업을 반복하는 것을 피할 수 있다. -> 빠른 렌더링 속도를 얻을 수 있다. ❌ useMemo() 로 .. 2023. 4. 18. [React] Hooks - useState(), useEffect() ✔ Hooks Function Component 는 Class Component 와 다르게 코드도 간결하고, 별도로 state 를 정의해서 사용하거나 Component 의 생명주기에 맞춰 코드가 실행되도록 할 수 없었다. 따라서 Function Component 에 이러한 기능을 지원하기 위해서 나온 것이 Hooks 이다. ① useState() : 가장 많이 사용하는 Hook 으로, state 를 사용하기 위한 Hook import React, { useState } from "react"; function Counter(props) { var count = 0; return ( 총 {count}번 클릭했습니다. count++}> 클릭 ); } 위의 예시처럼 count 를 함수의 변수로 사용하게 되면 .. 2023. 4. 17. [React] State 사용하기 ( React Developer Tools ) ✔ state 사용하기 src > chapter_06 > Notification.jsx 만들기 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.Component { constructor(props) { super(props); this.state = {}; } render() { return ( {this.props.. 2023. 4. 17. [React] State / Lifecycle State : React Component 의 상태 (React Component 의 변경 가능한 데이터) class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } ... } 모든 Class Component 에는 constructor 이라는 이름의 함수가 존재하는데, 생성자라는 의미를 가지고 있으며 Class 가 실행될 때 사용되는 함수이다. - state 는 직접 수정할 수 없다. (하면 안 된다.) // state 를 직접 수정 (잘못된 사용법) this.state = { name: 'Yeeun' }; // setState 함수를 통한 수정 (정상적인 사용법).. 2023. 4. 14. [React] 댓글 Component 만들기 ✔ Comment Component 만들기 src > chapter_05 > Comment.jsx 를 만든다. import React from "react"; function Comment(props) { return ( 제가 만든 첫 컴포넌트입니다. ); } export default Comment; src > chapter_05 > CommentList.jsx 를 만든다. import React from "react"; import Comment from "./Comment"; function CommentList(props) { return ( ); } export default CommentList; 화면에 렌더링하기 위해 index.js 수정 npm start ✔ Comment Component.. 2023. 4. 14. [React] Component 생성 / 렌더링 / 합성과 추출 Function Component function Welcome(props) { return 안녕, {props.name}; } Class Component class Welcome extends React.Component { render() { return 안녕, {this.props.name}; } } Function Component 와 Class Component 의 가장 큰 차이점 : Class Component는 React 의 모든 Component 가 React.Component 를 상속받아서 만든다. (상속: 객체지향 프로그래밍에서 나오는 내용으로, 한 클래스의 변수들과 함수들을 상속받아서 새로운 자식클래스를 만드는 방법) Component 의 이름 : Component 의 이름은 항상 .. 2023. 4. 14. [React] Components and Props Component : 작은 component 들이 모여서 하나의 component 를 구성하고 그것들이 전체 페이지를 구성한다. React component 는 만들고자 하는 대로 props(속성)을 넣으면 해당 props 에 맞춰 화면에 나타날 element 를 만들어준다. Props : Property 의 줄임말로 React Component 의 속성을 나타낸다. Component 에 전달할 다양한 정보를 담고 잇는 자바스크립트 객체이다. 눈에 보이는 글자나 색깔 등의 속성을 바꾸고 싶을 때 사용한다. ✔ Props 의 특징 - Read-Only : 읽기 전용 (값을 변경할 수 없다.) 다른 Props 의 값으로 elements 를 생성하려면 새로운 값을 컴포넌트에 전달하여 새로 Element 를 생.. 2023. 4. 14. [React] 시계 만들기 현재 시간을 출력하는 간단한 Clock 컴포넌트 import React from "react"; function Clock(props) { return ( 안녕, 리액트! 현재 시간: {new Date().toLocaleTimeString()} ); } export default Clock; 만든 Clock 컴포넌트를 화면에 랜더링하기 위해 index.js 를 수정한다. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './chapter_0.. 2023. 4. 14. [React] Elements Element : 리액트 앱을 구성하는 가장 작은 블록들 function Button(props) { return ( {props.children} ) } function ConfirmDialog(props) { return ( 내용을 확인하셨으면 확인 버튼을 눌러주세요. 확인 ) } ConfirmDialog 컴포넌트가 Button 컴포넌트를 포함하고 있다. // ConfirmDialog 컴포넌트의 elements { type: 'div', props: { children: [ { type: 'p', props: { children: '내용을 확인하셨으면 확인 버튼을 눌러주세요.' } }, { // Button 컴포넌트의 elements 를 형성해서 합치게 된다. type: Button, props: {.. 2023. 4. 14. [React] JSX 코드 작성 ✔ create-react-app TERMINAL에 'npx create-react-app my-app' 을 입력한다. 완료되면 cd my-app 을 통해 my-app 안으로 들어간 다음, npm start 를 입력하여 시작한다. ✔ my-app > src > chapter_03 > Book.jsx : JSX 파일 만들기 import React from "react"; function Book(props) { return ( {`이 책의 이름은 ${props.name}입니다.`} {`이 책은 총 ${props.numOfPage}페이지로 이루어져 있습니다.`} ); } export default Book; Book.jsx ✔ my-app > src > chapter_03 > Library.jsx : Boo.. 2023. 4. 14. [React] JSX 사용법 JSX 사용법 : JavaScript 코드 + XML / HTML ... XML / HTML {JavaScript 코드} ... XML / HTML 예제 1 const name = '예은'; const element = 안녕, {name}; ReactDOM.render( element, document.getElementById('root') ); 중간에 사용된 {name} 이 name 이라는 JavaScript 의 변수를 사용하기 위해서 중괄호를 사용하여 표현한 것이다. 예제 2 funtion formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Yeeun', lastName: 'Oh' };.. 2023. 4. 13. [React] JSX 의 장점 코드가 간결해진다. // JSX 사용함 Hello, {name} // JSX 사용 안함 React.createElement('div', null, `Hello, ${name}`); 가독성이 향상된다. : 코드를 작성할 때 뿐만 아니라, 유지보수도 쉬워지며 버그를 발견하기 쉬워진다. injection Attacks 방어로 보안성이 올라간다. const title = response.potentiallyMaliciousInput; // 이 코드는 안전합니다. const element = {title}; 2023. 4. 13. 이전 1 ··· 25 26 27 28 29 30 31 32 다음 반응형