본문 바로가기
반응형

Front/React33

[React] List 와 Key 를 사용하여 출석부 출력하기 src > chapter_10 > AttendanceBook.jsx import React from "react"; const students = [ { name: "Yeeun" }, { name: "Heongmin" }, { name: "Hyungyu" }, { name: "Kangin" }, ]; function AttendanceBook(props) { return ( {students.map((student) => { return {student.name}; })} ); } export default AttendanceBook; index.js 수정 위와 같이 잘 출력된다. 근데 콘솔창은 난리났다. key 값을 안 줘서 그렇다. import React from "react"; const stude.. 2023. 4. 20.
[React] 여러 개의 Component 렌더링 하기 ✔ List : JavaScript 의 변수나 객체들을 하나의 변수로 묶어 놓은 것 const numbers = [1, 2, 3, 4, 5]; ✔ Key : 각 객체나 아이템을 구분할 수 있는 고유한 값 / 아이템들을 구분하기 위한 고유한 문자열 리액트에서의 Key 값은 같은 List 에 있는 Element 사이에서만 고유한 값이면 된다. ✔ List 와 Key 를 이용하여 여러 개의 Component 렌더링 하기 위 사진에서 A 라는 컴포넌트와 B 라는 컴포넌트가 반복되고 있는 것을 볼 수 있다. 이렇게 같은 컴포넌트를 화면에 반복적으로 나타내는 경우에 사용하는 것이 자바스크립트 함수 map() 이다. 자바스크립트에서의 map() const doubled = numbers.map((numebr) => .. 2023. 4. 20.
[React] 로그인 여부를 나타내는 툴바 만들기 src > chapter_09 > Toolbar.jsx import React from "react"; const styles = { wrapper: { padding: 16, display: "flex", flexDirection: "row", border: "1px solid grey", }, greeting: { marginRight: 8, }, } function Toolbar(props) { const { isLoggedIn, onClickLogin, onClickLogout } = props; return ( {isLoggedIn && 환영합니다!} {isLoggedIn ? ( 로그아웃 ) : ( 로그인 )} ); } export default Toolbar; src > chapter_09 >.. 2023. 4. 20.
[React] Conditional Rendering ✔ Conditional Rendering (조건부 렌더링) : 어떠한 조건에 따라서 렌더링이 달라지는 것 function UserGreeting(props) { return 다시 오셨군요!; } function GuestGreeting(props) { return 회원가입을 해주세요.; } 위 코드는 각각 회원, 비회원에게 보여줄 함수 컴포넌트이다. function Greeting(props) { const isLoggedIn = props.isLoggedIn; if(isLoggedIn) { return ; } return ; } 로그인 여부에 따라 다른 문구가 뜨는 Greeting 함수이다. • Truthy : true 는 아니지만 true 로 여겨지는 값 • Falsy : false 는 아니지만 f.. 2023. 4. 20.
[React] 클릭 Event 처리하기 ✔ 클릭 Event 처리하기 src > chapter_08 > ConfirmButton.jsx import React from "react"; class ConfirmButton extends React.Component { constructor(props) { super(props); this.state = { isConfirmd: false, }; this.handleConfirm = this.handleConfirm.bind(this); } handleConfirm() { this.setState((prevState) => ({ isConfirmd: !prevState.isConfirmd, })); } render() { return ( {this.state.isConfirmd ? "확인됨" : ".. 2023. 4. 20.
[React] Event 의 정의 및 Event 다루기 ✔ Event Dom 의 Event Activate React 의 Event Activate 버튼을 누르면 activate 라는 함수를 호출한다. Dom 의 Event 와 React Event 와의 차이점은 onClick 이 카멜케이스로 작성되었다는 점이다. 그리고 Dom 에서는 Event 를 처리할 함수를 문자열로 전달하지만, React 에서는 함수 전체로 전달한다. ✔ Event Handler (= Event Listener) : 어떤 사건이 발생하면, 사건을 처리하는 역할 class Toggle extends React.Component { constructor(props) { super(props); this.state = { isToggleOn : true }; // callback 에서 `th.. 2023. 4. 19.
[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.
반응형

티스토리툴바