Dr.Mlem Blog

보호되어 있는 글입니다.

Q1.Comp1 으로 정의된 컴포넌트가 받는 props의 파라미터 명이 aaa, bbb, ccc 이며, aaa는 해당 컴포넌트의 height 속성, bbb는 width 속성, ccc는 z-index 속성에 대한 값이라고 하자. 이때, Comp1을 import해서 사용하는 파일 JSJS.js에서, Comp1에 height 속성값으로 100을 주고 싶다고 하면, JSJS.js 에서는, 라고 작성을 해야하나? 아니면 이라고 작성해야하나? 내가 한 질문 과정중에, props가 주고 받는 과정에 대해서 추가적으로 같이 설명하면서 물어봐야 할 부분이 있다면 지적도 해줘.   A1.ChatGPT의 말: 좋은 질문이에요! 주어진 설명을 기반으로 대답하자면, 라고 작성해야 합니다. 이유는 Comp1이 받는 prop..

Q.styled-components들도, 컴포넌트니까, props를 사용할 수 있는 것인가?   A.네, styled-components도 React 컴포넌트이기 때문에, props를 사용할 수 있습니다. styled-components에서는 props를 활용하여 스타일을 동적으로 변경하거나, 컴포넌트 내부 로직에 따라 다양한 스타일링을 적용할 수 있습니다.props를 사용한 styled-components의 작동 방식styled-components에서 props는 스타일 함수 내에서 접근할 수 있으며, 이를 통해 조건부로 스타일을 설정할 수 있습니다.기본 예제: props로 동적 스타일링import styled from "styled-components";// styled.div에서 props를 받아 ..

컴포넌트와 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..