Dr.Mlem Blog

컴포넌트와 props 02에 이어서 마지막...10-04의 grade_table의 index.js, GradeItem.js, 그리고 data의 GradeData.js가 어떤 연산과정을 이어서화면에 결과가 출력되는지 정리를 마무리함.Q1.일단 알겠어. 그렇다면 다시 정리해볼게. 그렇다면 내가 이해한게 맞는지 확인해줘.// GradeData.jsconst GradeData = [ { "이름": "철수", "학년": 1, "성별": "남자", "국어": 98, "영어": 78, "수학": 88, "과학": 64 }, { "이름": "영희", "학년": 2, "성별": "여자", "국어": 88, "수학": 62, "과학": 72 }, { "이름": "민수", "학년": 1, "성별": "남자"..

컴포넌트와 props 01에 이어서... Q1. 이렇게 입력하면, GradeItem = ({ name, level, sex, kor=0, eng=0, math=0, sinc=0 }) 이렇게 입력받은 것과 같은거야?   A1.네, 정확히 이해하셨습니다! 🎉이 JSX 코드는 GradeItem 컴포넌트를 호출하면서 props를 전달하는 역할을 합니다. 전달된 props는 GradeItem 내부에서 아래와 같이 받습니다:GradeItem = ({ name, level, sex, kor=0, eng=0, math=0, sinc=0 })1. 왜 이렇게 동작하나요?리액트에서는 JSX를 사용하여 컴포넌트를 호출할 때, 태그 속성으로 전달된 값을 props 객체로 전달합니다.즉:이 코드는 GradeItem 컴포넌트를 ..

10-04 컴포넌트와 props가 헷갈리는 상황,특히 GradeData-GradeItem-index.js 3개 왔다갔다하는게 이해가 안되는 중...Q1.예를들어서 이라는 컴포넌트가 있는데, 아래처럼 라고 하면, 하여튼 저 컴포넌트에 name이라는 변수와 age라는 변수를 보내는거야? 그리고 저 컴포넌트가 반환하는 내용 중에, 변수 name을 쓰는 것이 있으면 그 곳에 '철민'이라고 넣고, age라는 변수를 쓰면 거기에 숫자 22를 넣는거야?   A1.네, 정확하게 이해하셨습니다! 😊 라고 작성하면, MyPropTypesSub 컴포넌트로 name과 age라는 이름의 데이터를(props) 보내는 것입니다.구체적인 동작 과정1. 컴포넌트 호출name='철민'과 age={22}는 각각 props로 MyPro..

Q1.react에서, 순수 html태그는 ()로 묶는거야?(아래는 10-04 MyPropsTypesSub.js의 코드)const MyPropTypesSub=({name, age, hobby}) => { return( MyPropTypesSub 안녕못한다. 네놈의 이름은 {name}, 나이는 {age}세. {hobby && (취미는 {hobby}냐?)} {/** hobby 값이 있으면 출력, (아마 순수???????)html태그 덩어리는 일단 괄호로 감싸준다는 생각 하자. */} );}; 이 안에서, (취미는 ..

Q1.const MyChildrenSub 는 선언은 상수인데 내용물은 함수인데, 이건 도대체 뭔지가 궁금해.   A1.const MyChildrenSub는 상수인데, 내용물이 함수? React에서 자주 사용하는 패턴으로, 함수를 상수로 선언하여 컴포넌트를 정의한 것입니다.코드의 구조const MyChildrenSub = ({width, height, children}) => { ... }위 코드는 화살표 함수를 사용한 React 함수형 컴포넌트입니다.상수와 함수의 관계const는 변수를 재할당하지 못하게 고정하는 키워드입니다.하지만 const로 선언된 변수의 값이 함수일 경우, 함수 내부의 로직은 실행될 수 있습니다.즉, MyChildrenSub는 상수로 선언된 함수이며, MyChildrenSub()를 ..

// MyChildrenSub.js -> 10-04 props 단원의 my_children 안의 파일.import React from 'react';import PropTypes from 'prop-types';const MyChildrenSub = ({width, height, children}) => { {/** 여기에서 쓰이는 children은 마치, props 처럼 기능이 설정된 예약어인가????? */} /** CSS 속성값을 변수화 할 경우 JSON 객체로 구성한다 */ const myStyle = { width: width+'px', height: height+'px', border: '5px solid #d5d5d5', padd..

import React from "react";const If2 = () => { const isLogin = true; // 트/팔로 껐다 켯다 할 수 있음 return( If2 {isLogin && 로그인 되었느뇽?} );};export default If2;Q1.이 코드에서, {isLogin && 로그인 되었느뇽?} 이렇게 쓰는 것은, 그냥 JS 혹은 JSX 스타일의 연산방법인거야?  A1.네, {isLogin && 로그인 되었느뇽?}는 JSX 스타일로 JavaScript의 논리 연산자(&&)를 활용한 표현식입니다. 이를 이해하기 위해 JSX와 JavaScript의 관계를 함께 살펴보겠습니다.JavaScript에서의..

(10-03 JSX Loop3의 index.js에서)Q1./** * JSX 반복 처리(3) - map() 함수를 사용한 배열 원소 탐색 축약형 */import React from "react";const Loop3 = () => { // 화면에 표시할 데이터 const seasons=['봄','여름','가을','겨울']; return( Loop3 {/* seasons.map((v,i) => { return{v}; })*/} ..

Q1.순수 React로만 페이지를 작성했을때 검색엔진에 노출이 안되는 점이, index.html의 내용 그대로 브라우저에서 인식하기 때문에, 검색 엔진들이 읽어갈 내용이 없기 때문인거지?   A1.네, 맞습니다. 순수한 React로 작성된 페이지는 클라이언트 사이드에서 렌더링되기 때문에, 초기 로드 시 index.html에는 실제 콘텐츠가 포함되어 있지 않습니다. 검색 엔진은 보통 서버에서 전달되는 정적인 HTML 콘텐츠를 크롤링하는데, 클라이언트 사이드에서 동적으로 생성되는 콘텐츠는 인식하지 못할 수 있습니다. 따라서 이러한 방식으로 작성된 React 페이지는 검색 엔진에 노출되지 않을 수 있습니다. 이를 해결하기 위해서는 서버사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)을 사용하여 초기 HTM..