반응형 Web/React7 Props 속성 값 리액트 Props : 부모 컴포넌트가 자식 컴포넌트에게 전달하는 값이다. => 부모 컴포넌트 => 자식 컴포넌트로 값을 전달할 수 있음 - props 객체입니다 - 자식컴포넌트에서 props을 전달받았을 경우 props(예시). 데이터로 접근할 수 있음 - 자식에서는 props는 읽기 전용 입니다 - 모든 컴포넌트에서 props 수정할 수 없다. 근데 부모 컴포넌트의 props를 변경하면 그걸 전달받는 자식 컴포넌트에서 리랜더링 된다. 요기서 랜더링이란? :: 만든 페이지를 사용되는 각각의 브라우저(크롬, 익스플로러, 파이어폭스 등등)에 보이게 하는 것예외 React.FC?? 뭘까?? FC : Function Component로 함수형 컴포넌트입니다 줄여서 FC React + Typ.. 2024. 12. 29. axios개념 Axios: JS에서 HTTP(Hypertext transfer Protocol) 요청을 실행하기 위한 라이브러리 -통신 -Promise 기반의 HTTP 클라이언트, 브라우저와 node.js 모두 사용가능 Axios의 장점 - 간결한 API를 사용 (HTTP 요청과 응답 처리가 간결하고 직관적임) - 브라우저의 호환성이 높음 - 자동으로 JSON 데이터 변환을 지원HTTP 통신 => 웹에서 데이터를 교환하는 주요 프로토콜 - 클라이언트 (브라우저)와 서버간의 통신을 위해 사용, 요청(request), 응답(response)의 형태로 데이터가 교환 방법# 1) GET : 데이터를 조회할 때 사용 - URL에 쿼리 파라미터를 포함하여 요청을 보냄 - 데이터를 조회하고 검색하는 데 사용 EX.. 2024. 11. 4. zustand zustand : 전역 상태 관리 1. 개념 ==> 상태를 의미 - React에서 사용되는 전역 상태 관리 라이브러리 중 하나 2. 장점 : 간결성 구독 최적화, 유연성, 접근성 3. zustand의 형태(ts기준) create 함수를 사용하여 store(스토어)생성 해당 스토어를 통해 프로젝트 전역에서 데이터 접근 가능 create 함수에 제네릭을 사용하여 함수 구조를 정의 전역 상태값(필드), 전역 상태 설정 함수 store을 사용하는 이유: props drilling을 막기 위해서 props drilling: React 애플리케이션에서 데이터를 전달하기 위해 필요한 과정을 설명하는 용어 -creat 함수 내의 구조 : set 함수를 통해 상태를 업데이트 (set) => ({해당 구조 내에서.. 2024. 11. 3. use-cookie+ Cookie cookie(쿠키) ==> 사이트 방문하고 이용할 때 브라우저에 저장되는 내용 서버(server)는 cookie를 이용해서 브라우저에 데이터를 넣을 수 있다. 브라우저: 내가 가지고 있는 정보라고 생각해 주면 됩니다 서버에서 브라우저로 response브라우저에서 서버로 request>npm i --save @types/reac/cookiereact-cookie: 리액트에서 쿠키를 쉽게 관리 할수 있는 라이브러리 ===> 쿠키의 생성 , 접근, 수정, 삭제 기능을 담당기본 사용방법 const [cookie, setCookie(name , {option}), removeCookie(name , {option})] = useCookie(['쿠키 이름']); cookie: 쿠키 ->모든쿠키가 포함된 JS.. 2024. 11. 1. UseEffect UseEffect: 1. 함수형 컴포넌트 2. 랜더링 될 때 와 상태가 변경될 때 부수효과 처리 3.Hook 부수효과란: SIDE Effect=부작용 ---> 본래 원했던 효과가 아닌 다른 효과가 부수적으로 딸려온다 정리하면 내가 짠 코드가 원하는 대로 동작하지 않는 게 아니고 코더가 함수등에 본해 메인 역할 외에 다른 효과를 추가한다 useEffect사용법 -첫 번째 인자 : 부수 효과 두 번째 의존성 배열(deps- dependencies)UseEffect 종류 -> 1-2-3 순으로 보면 된다.1. 값이 있는 배열 : 해당값이 마운트 될 때마다 실행 (여러 개 가능)useEffect(() => { - 부수 효과 코드를 작성 -2return () => { -정리(clean-.. 2024. 10. 31. Hook-1 Hook - 함수 형 컴포넌트에서 사용할 수 있는 기능이다. Hook의 자주 사용하는 종류 useState - 상태를 관리해 주는 기능useEffect - 랜더링 될 때마다 특정 작업을 실행해 주는 기능 useRef -변경 가능한 참조 객체를 생성할 수 있는 저장 공간 useMemo -Memoization(메모리화) -성능 최적화하기 위한 기능 useReducer - 컴포넌트의 상태 관리 기능 (useState랑 기능 비슷함) 1. useState 전체 코드 export default function UseState01() { const[count, setCount] =useState(0);const[message, setMessage] =useState('안녕하세요'); const ha.. 2024. 8. 31. 이전 1 2 다음 반응형
