React7 React <usrRef>: 참조 객체 생성 useRef (use + reference(참조))✅변경 가능한 참조 객체를 생성할 수 있는 기능(hook)useRef는 객체를 반환시킨다. useRef객체에는 current라는 속성이 존재 > 컴포넌트의 재렌더링에도 값이 유지사용 목적DOM 요소에 직접적으로 접근하고 조작컴포넌트가 재랜더링될 때도 값이 유지되는 변수 관리이전 상태를 기억 (렌더링 사이에 지속되는 값을 유지)기본문법✅ const refContainer = userRef(initailValue);initailValue: 참조 객체의 초기값refContainer.current: 저장된 현재 값에 접근useState와 useRef를 사용해서 카운트 예제를 만들어 본다. 이 예제를 통해서 useRef를 사용하면 재랜더링되더라도 동일한 참조.. 2024. 9. 19. React Hook:<useState, useEffect> Hook 리액트 함수형 컴포넌트에서 사용할 수 있는 기능의 모음문법체계가 "use-"로 시작 ✔️useState✅ 함수형 컴포넌트 / 상태관리 함수 / Hook const [state, setState] = useState(초기값); [state, setState] : [상태변수, 상태업데이트 함수]const 상태변수 = 초기값;const 상태업데이트 함수 = () => { 반한값(익명함수)} ✅구조분에 할당을 꼭 기억하자const [a, b] = [1, 2]; => const a = 1; + const b = 2;밑에 두 함수를 더한 것과 같다. export default function UseState(){const [count, setCount] = useState(0);const handleCo.. 2024. 9. 16. REACT <Props, Route, Rendering, Handler> Props 전달부모 컴포넌트로 부터 자식 컴포넌트로 데이터를 전달할 때 사용props로 전달된 데이터는 자식 컴포넌트에서 readonly!처럼 사용(변경 불가)✔️부모 컴포넌트export default function Props01() { const props = { colorProps: 'orange', name: '이민영' } return ( )}먼저 props값에 name, colorProps에 속성값을 넣는다. 이 값은 고정돼 자식컴포넌트에 전달되면 readonly처럼 사용하게 되 변경이 불가하다....props가 구조 분해 할당을 사용하여 각각의 속성명을 찾아감 function ChildComponent(props: { name: string }) { .. 2024. 9. 12. React JSX(TSX) ⭐ JSX(TSX)JS(TS) 파일 내에서 HTML과 유사한 마크업을 작성할 수 있도록 해주는 JS 구문 확장 문법✔️ 사용 목적선언적 뷰 설계 가능 (UI를 직관적으로 설계)불필요한 DOM 설정 필요하지 않다.✔️특징JS + HTML(XML) 형태로 엄격한 문법 체계JSX 내에서 Babel을 사용해 JS로 변환하려면 XML 문법을 준수⭐ JSX 문법 규칙✅ 단일 루트 노드하나의 '컴포넌트'는 단일 루트 노드만 반환 >> 최상단의 루트 태그가 존재해야 함 >> 주로 빈 Fragment로 감싸서 표현✅태그 닫기태그는 반드시 닫혀야 하며 단일 태그 사용 시 닫히는 꺽쇠괄호에 /가 첨부! >> input, br, hr, img 등✅대소문자 구분태그 내의 이름이 대소문자를 구분 >> 소문자로 시작: 'HTML.. 2024. 9. 10. React <사진 가져오기> ⭐ 이미지 사용방법 리액트에서 이미지를 사용할 때는 import를 사용한다. ex) import puppy01 from '../../../assets/image/dog01.jpg'; ✔️ 예제 1import puppy01 from '../../../assets/image/dog01.jpg';export function Img() { return( )}import에서 지정한 puppy01에는 사진은 경로가 담겨져 있다. img에 src경로에 puppy01을 기입하면 경로를 기입하는 것과 같다. 나머지는 원래 HTML방식과 똑같다. function Component01() { return ( Component01 컴포넌트의 시작 {/* img 태그 - .. 2024. 9. 7. React <rfc 사용 함수의 컴포넌트 구조 : 숫자카운트> ⭐ 숫자 카운트 버튼export default function ReactExample() {//? 리액트 기능 사용 (함수형 컴포넌트의 기능: hook) const [count, setCount] = useState(0); function increment() { setCount(count + 1); } function decrement() { setCount(count - 1); if(count useState(0); : useState 훅을 사용해 count에 기본값은 '0'이며 타입은 넘버로 지정한다.increment()함수를 countrk +1씩 증가하는 함수를 만들며 decrement 또한 동일하게 작서하며 if조건문을 사용해 0 이하의 경우 0으로 표시되도록한다.r.. 2024. 9. 4. 이전 1 2 다음
