hanol hanol

🎯 Wrapper 란? => 불필요한 중첩을 피하기 위해 사용하는 태그 Wrapper라는 컴포넌트를 만들어서 감싸는 역할을 하는 경우에는 아래와 같이 간단한 형태로 작성할 수 있음 이 컴포넌트는 자식 컴포넌트들을 감싸서 특정한 스타일이나 레이아웃을 적용할 때 사용될 수 있다 const Wrapper = (props) => { return props.children; }; export default Wrapper; 🎯 Fragment 란? => 간결한 코드를 작성하는데 도움주는 태그 최종 페이지에 불필요한 HTML요소들이 표시 되지 않음 방법 1 ; 방법 2 ; 방법 3 import React, { Fragment } from "react"; 태그 썼을때 태그 썼을 때 => 화면에 태그요소가 나타나지 않음..

1. App 컴포넌트를 시작 코드에서 여러개의 작은 컴포넌트로 분할하기 2. 이벤트 처리하기 (form이 제출될 때 reset버튼 이벤트 처리하기) => 이벤트 핸들러 추가 3. 상태관리 시작 (여러 상태 조각들로) 4. 화면에 데이터 출력하기 (데이터 바인딩) 5. 스타일이 지정된 컴포넌트 사용 하거나 모듈 css 파일을 사용하기 step1 각 컴포넌트를 세분화하여 나타내자 각각 역할을 구분하여 세분화 시켜보자 크게 헤더역할을 하는 컴포넌트와 form을 입력하는 컴포넌트와 table로 나타내는 컴포넌트 세가지로 나눌 수 있다 return ( ); step2 css를 재사용 가능하고 관리하기 쉽게 만들자 {props.children} 부모 컴포넌트 내부에서는 자식 컴포넌트 정보에 접근할 수 있다 (컴포넌..

리액트 디버깅 1. 하나의 태그안에 감싸져 있는지 확인하기 2. 함수명이 선언된 함수와 같은지 확인하기 3. 함수를 제대로 호출하고 있는지 확인 4. props로 받아오는 값이 제대로 받아와지는지 확인 5. 이벤트함수는 on뒤에 대문자로 시작 1. 코드의 흐름을 읽고 분석한다 ( 논리상의 오류 ) 2. 에러 메시지를 확인하고 해석한다 경고가 없을 때 개발자도구 > source코드확인 하기 user > src 여기에 없다면 webpack폴더에서 확인해보기 코드의 중단점 설정 deleteHandler를 누르면 중단점이 있는 줄에서 멈추게 됨!! 오른쪽 화살표로 넘기면서 실행하고 디버깅하기! 마우스를 올리면 값들도 나타내줌

태그안에 스타일링 적용 방법 작은 따옴표 '' 중괄호안의 {key : value} 카멜케이스 사용 동적 인라인 스타일 적용하기 값이 변할 때 동적인 css넣기 (삼항연산자를 사용함) Course Goal => !isValid 이면 red로 label의 색상을 변경한다 const [isValid, setIsValid] = useState(true); borderColor : 테두리 색상 transparent : 완전히 투명한 색 즉, 해당 요소나 영역이 보이지 않게 됨 const goalInputChangeHandler = (event) => { if (event.target.value.trim().length > 0) { setIsValid(true); } setEnteredValue(event.targ..

조건부 컨텐츠 삼항연산자 {조건식 ? 참 : 거짓} => 조건식이 참일 때 참을 반환, 거짓일 때 거짓을 반환 {조건식 && 참} => 조건식이 참일 경우에만 반환 {item>0 ? item : not item} {item && item} 복습!! 데이터 양방향 통신 이해하기!! 첫번째 할일 !! 부모 컴포에서 통신 받을 함수 함수포인터로 정의를 해줌 onCancel={onCancelHandler} 두번째!! 자식 컴포에서 const ExpensesForm = (props) => { retrun cancel } props로 부모에서 전달해준 onCancel이라는 속성을 반환함 부모컴포에서 onClick을 받아 const onCancelHandler = () => { setIsEdit(false); }; ..

스프레드 문법 [...변수명] 기존의 배열이나 객체를 변경하지 않으면서 그 값을 가지고 새로운 배열이나 객체를 생성할 수 있다 const addExpenseHandler = (expense) => { setExpenses((prevExpenses) => { return [expense, ...prevExpenses]; }); }; 여기서 prevExpenses는 이전의 expenses 배열을 나타낸다 새로운 expense를 추가할 때는 배열의 spread 연산자 ...를 사용하여 기존 배열의 모든 요소를 가져오고, 그 앞에 새로운 expense를 추가한다 부모 자식 컴포넌트 간의 양방향 통신은 어떻게 할까? Expenses는 부모컴포넌트, ExpensesFilter는 자식 컴포넌트로 구성하고 예를들면, ..

User Interaction & State 리액트 상태관리 [리액트 hook] 리액트 훅으로 상태관리하기!! react에서 상태(state) 관리는 매우 중요하다 리액트 훅 (use로 시작함) ex) useState, useRef, useSelector...등등 useState 함수 컴포넌트에서 상태를 추가하고 업데이트할 수 있는 기능 (자주 바뀌는 값을 설정할 때 주로 사용) import React, {useState} from "react"; 구조 분해 할당 useState를 사용하면 배열의 첫 번째 요소로 현재 상태값을 받아오고, 두 번째 요소로는 해당 상태값을 업데이트할 수 있는 함수를 받아옵니다. cosnt[title, setTitle] = useState(props.title); => tit..

리액트는 컴포넌트들로 이루어진 결정체로 볼 수 있다. 컴포넌트란? 사용자 인터페이스에 있는 재사용가능한 구성 요소 JSX란? 자바스크립트안에 있는 HTML 컴포지션이란? 작은 구성요소부터 시작해서 사용자 인터페이스를 구축하는 방식. const Card = (props) => { const classes = "card " + props.className; return {props.children}; }; export default Card; => props.className : 사용자 지정 외부의 props에 대한 클래스를 불러와 card와 합하여 두개의 클래스를 적용해줌 => props.children : children은 예약어로 card로 감싸진 사용자 지정 컴포넌트가 표시 될 수 있게 해줌. 리액트..