React9 Props로 값 전달을 위한 스프레드 연산자 사용 (todo는 아래와 같이 객체요소 2개를 가지고있는 배열임) 컴포넌트에 props 전달에 원래 아래와 같이 이름=“값” 방식으로 해야하는데(여기에서 onCreate와 todo는 값을 담고 있는 변수임) 학습하다보니 아래와 같이 배열의 map메소드를 활용해서 배열 내의 객체요소(it)를 스프레드 연산자를 활용해서 컴포넌트에 값을 전달하려고 하는데 이와같이 중괄호안에 스프레드 연산자(…)를 활요해서 값을 전달할 수 있다고 한다. 그대로 풀어보면 {…it} == {id:3, content, isDone:false} 이와 같은 형식이라는 건데 TodoItem컴포넌트에서 받아올 때는 구조분해할당으로 이렇게 받아올 수 있다. 정리 컴포넌트로 전달하려는 이름=“값”은 props라는 객체에 담긴다. props는 원래 .. 2023. 9. 25. Props 전달하는 경우 전개연산자(Spread Operator)의 사용 일반적으로 props를 넘겨줄 때 컴포넌트 내의 태그 내에서 와 같은 형태로 넘겨주었는데 props로 넘겨줄 객체가 존재하는 경우에는 전개 연산자를 활용해 그대로 넘겨줄 수 있다. 예를 들어 아래의 두 컴포넌트는 결과적으로 동일하다. function fn1() { return ; } function fn2() { const props = {content1="독서" content2="조깅"}; return ;} props는 객체이기 때문에 일반적으로 태그 안에 이와 같이 지정하는 경우에는 props = { content1 : "독서", content2 : "조깅" }이 되는 것이고 전개연산자를 활용하는 경우 const props = {content1="독서" content2="조깅"} return ;} 태.. 2023. 9. 19. JSX란? JSX는 무엇인가? 리액트에서 컴포넌트는 자바스크립트 함수로 만드는데 이 함수는 HTML 값을 반환, 이렇듯 자바스크립트와 HTML 태그를 섞어 사용하는 문법을 JSX(JavasScript XML)라고 한다. 결국 JSX는 자바스크립트의 확장 문법이다. JSX는 자바스크립트의 표현식들(산술, 문자열, 논리)을 HTML 태그와 함께 사용가능하다. 예시 function Body() { const A = 1; const B = 2; return ( {A + B} ); } 이 컴포넌트를 페이지에 렌더링한다면 3출력. 예외 JSX는 값을 반환하는 자바스크립트 표현식들을 사용할 수 있는데 숫자, 문자열, 불리언, null, undefined를 제외한 값을 사용하면 오류 발생. 객체 , (객체 자료형에 속하는 )함수.. 2023. 9. 6. 이전 1 2 다음
