본문 바로가기
반응형

분류 전체보기353

[React] Hooks 사용하기 ✔ useCounter() Custom Hook 만들기 src > chapter_07 > useCounter.jsx import React, { useState } from "react"; function useCounter(initialValue) { const [count, setCount] = useState(initialValue); const increaseCount = () => setCount((count) => count + 1); const decreaseCount = () => setCount((count) => Math.max(count - 1, 0)); return [count, increaseCount, decreaseCount]; } export default useCounter.. 2023. 4. 19.
[React] Hook 의 규칙과 Custom Hook 만들기 ✔ Hook 의 규칙 ① Hook 은 무조건 최상위 레벨에서만 호출해야 한다. -> 반복문이나 조건문 또는 중첩된 함수들 안에서 Hook 을 호출하면 안 된다. ② Hook 은 컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다. -> 이렇게 해야 react 가 다수의 useState() Hook 과 useEffect() Hook 에 호출해서 컴포넌트의 state 를 올바르게 관리할 수 있게 된다. ❌ 잘못된 Hook 사용법 function MyComponent(props) { const [name, setName] = useState('Yeeun'); if (name !== '') { useEffect(() => { ... }); } ... } 위 코드는 if 문의 조건이 true 여야 use.. 2023. 4. 18.
[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.
반응형

티스토리툴바