front-end23 useEffect Hook 의존성 배열 이해하기 useEffect 의존성이란? useEffect Hook의 의존성 배열은 useEffect 함수가 언제 다시 실행될지 결정하는 역할을 합니다. 예시 코드: 여기서 [count] 부분이 의존성입니다. JavaScript const [count, setCount] = useState(0); useEffect(() => { console.log('useEffect 실행!'); }, [count]); const handleClick = () => { setCount(count + 1); }; return ( 카운트: {count} 증가 ); 코드를 사용할 때는 주의가 필요합니다. content_copy 위 코드에서: count는 상태 변수입니다. useEffect Hook은 컴포넌트가 처음 렌더링될 때와 cou.. 2024. 3. 5. [리액트] Context props를 거치지 않고 언어값처럼 프로젝트에서 전체적으로 0. props drilling? Prop Drilling은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정이다. prop drilling이 보통 3~5개 컴포넌트를 거치는 정도이면, 괜찮을 수 있으나, 10개 이상을 거친다면 중간 컴포넌트들은 불필요하게 prop을 받게 되어 가독성이 떨어져 유지보수가 어려워진다. 이를 해결하기 위해 전역 상태관리 라이브러리를 사용할 수 있으며, 간단하게는 context api를 사용할 수 있다. 1. context란? 리액트에서 context를 쓰는 이유는 단계마다 일일이 props를 넘겨주지.. 2023. 4. 7. [AI] 네이버클라우드 STT vs 리액트 STT 네이버클라우드 stt를 이용하게 되면, 음성을 녹음하고 저장을 할 수 있다. 저장을 한 다음 문자열로 바꿔서 DB에 저장하거나, 검색도 할 수 있다. 그란, 리액트의 stt기능은 아래와 같이 바로 문자열을 음성으로 바꾸는 단편적인 기능만 가능하다. 2023. 4. 4. [리액트] hook :useState, useEffect, useContext 1. useState 최종목적은 변수관리입니다. 변수 사용할 때 무조건 사용해야 합니다. 예제1) function App() { //const는 외부의 접근 차단하기 위함 (보호) -> 컴포넌트 안에서만 접근이 가능하다. const [state, setState] = useState('click'); //getter, setter 초기값 //state = "새로운 값"; // 상수에 대입 불가 -> const변수라서 !! //setState("새로운 값"); //다시 초기화 불가능 -> const변수라서 !! //getter만 사용할 수 있는것임. console.log(state); function btnClick(){ setState('클릭했음'); } btnClick()으로 하면 Too may rer.. 2023. 3. 30. [리액트] map개념, map활용하기 예제1) 리스트를 map으로 가져오기 이런 기본 형태의 리스트를 map으로 표현해보기 function App(){ return ( Apple Pear Banana ) 🎀map으로 표현하기 const arr = ['Apple', 'Pear', 'Banana']; //중요> index를 추가하고 index를 키값으로 설정하면 중복 방지되어 경고 사라짐 //원래는 그냥 data만 넣어도 배열이 잘 나옴. const datalist = arr.map((data, index) => ({index} {data})) return ( {datalist} ) } 경고문 : map으로 리스트를 가지고 올 시에는 중복되지 않아야한다. 즉, 고유한 키값을 가지고 있어야 한다. 따라서 index를 추가하고 index값에 key.. 2023. 3. 30. [리액트] 일정관리 만들기 - MAP, 컴포넌트, props, event https://www.youtube.com/watch?v=qcphnSqneE0&list=PLKvVQ9ZQzjVkP0xd30Zi90P4S_rTlm-LH&index=1 리액트 한번에 이해 https://www.youtube.com/watch?v=TjUju3aUIDM&list=PLKvVQ9ZQzjVkP0xd30Zi90P4S_rTlm-LH&index=6 일정관리 만들기 위 강의를 참조해서 필기했습니다. 일정관리 페이지 만들기 아래와 같이 App.js + TodoBoard.js + TodoItem.js 3개의 컴포넌트를 각각 다른 파일에 만들었습니다. (css는 추가하지 않았습니다) 🎈🎈App.js import './App.css' import React, {useState} from 'react'; import.. 2023. 3. 30. 이전 1 2 3 4 다음
