props 공부하는데 숙제 내주신걸 계속 붙잡고 있어도 안풀려서 결국 답을 봤다...
근데 내가 했던 것들이 왜 안 됐는지 궁금해서... 챗 GPT한테 물어봤다.
Modal이라는 App의 자식 컴포넌트를 만들었고
글제목을 불러오고, 내가 버튼을 클릭하면 현재 글제목이 제목 자리에 들어오도록 하고 있음
데이터 바인딩을 어떻게 해야 할지 몰라서 여러 가지 시도해 봄
최종으로 성공한 코드는 이것:
<Modal 글제목={글제목} 글제목변경={글제목변경} />
(중간 생략)
function Modal(props) {
let copy = [...props.글제목];
copy[0] = "딱대 코트 추천";
return (
<div className="modal">
<h4>{props.글제목[0]}</h4>
{/* 내가 정한 name 으로 불러와야함!!!!! 주의!!!!! */}
<p>날짜</p>
<p>상세내용</p>
<button
onClick={() => {
props.글제목변경(copy);
}}
>
글수정
</button>
</div>
);
}
"내가 했던 것들이 왜 오류가 나는지가 궁금해서 물어봤음
state와 state 변경함수를 props로 보내줘야 했는데
그래서 이렇게 해봤다:
*필요한 두가지를 오브젝트 형식으로 한번에 props로 보내기
<Modal 글제목={{글제목, 글제목변경}} />
<h4>{props.글제목함수[0][0]}</h4>
onClick={() => {
props.글제목함수[1];
}}
내가 궁금해 했던건 크게 세가진데
1. 자바스크립트에서는 배열 안의 배열에 접근할 때 배열[0][0] 이런 식으로 접근하던데, 그게 왜 안되는지
2. props.modal[1](props.modal[0][0]); 이렇게도 해봤는데 이것도 안됨
3. <Modal 글제목={글제목} /> 이렇게 컴포넌트를 호출할 때, 이 안에 속성(attribute)를 써줄 때, 배열은 왜 넘길 수 없는지
GPT
안녕하세요! React에서
props와 데이터 바인딩 관련해서 생긴 궁금증들에 대해 하나씩 상세히 설명드릴게요. 질문에서 다뤄야 할 중요한 부분들을 차례대로 정리하겠습니다.
1. 오브젝트 형식으로 props를 보내기
<Modal 글제목={{ 글제목, 글제목변경 }} />
<h4>{props.글제목함수[0][0]}</h4>
onClick={() => {
props.글제목함수[1];
}}왜 안 되는가?
글제목={{ 글제목, 글제목변경 }}에서 props.글제목은 하나의 객체로 전달됩니다.
즉, props.글제목은 { 글제목: 글제목, 글제목변경: 글제목변경 } 형태가 되고, 접근 방식이 달라집니다.
이때:
props.글제목[0][0]은 올바르지 않습니다.props.글제목은 객체이기 때문에 배열처럼props.글제목[0]으로 접근할 수 없고, 반드시 키값을 사용해 접근해야 합니다.props.글제목.글제목[0] // 이렇게 접근해야 함- 그리고
props.글제목함수[1]역시 잘못되었습니다.props.글제목에 전달된글제목변경은 객체의 속성으로 들어가 있으므로 다음처럼 접근해야 합니다.props.글제목.글제목변경(copy); // 올바른 호출
정리
React에서 props로 객체를 넘기는 것은 가능합니다. 하지만 객체의 속성(key)을 통해 데이터를 접근해야 한다는 점에서, 기존과 접근 방식이 달라지므로 실수할 가능성이 커집니다.
따라서 props로 각각의 값을 개별적으로 전달하는 것이 더 직관적이고 추천되는 방식입니다.
2. 배열 안의 배열에 접근하는 방식과 문제
props.modal[1](props.modal[0][0]);문제가 무엇인가?
위 코드는 두 가지 이유로 문제가 될 수 있습니다.
-
props.modal이 배열 형태가 아니라면 배열의 인덱스로 접근하는 방식은 당연히 오류가 납니다.- 예를 들어
props.modal이 객체라면props.modal[1]은 undefined를 반환합니다.
- 예를 들어
-
배열이 맞더라도
[1]이 함수가 아닐 경우 호출하면 에러가 발생합니다.- 만약
props.modal이 배열이고,props.modal[1]에 함수가 담겨 있지 않다면props.modal[1]()을 호출할 때 에러가 납니다.
- 만약
React에서는 이런 방식은 비추천
React에서 배열이나 중첩 구조를 props로 넘길 때는 명시적으로 의미를 드러내는 변수명과 구조를 사용하는 것이 중요합니다. 예를 들어:
<Modal
글제목={글제목}
글제목변경={글제목변경}
/>이렇게 전달하면, 각각의 역할이 명확하므로 코드가 더 직관적이고 유지보수하기 쉽습니다.
3. React에서 배열을 props로 넘기는 것
"배열은 왜 props로 넘길 수 없나요? 에러 메시지가 뜹니다."
배열을 props로 넘길 수는 있다
React에서는 배열을 props로 넘기는 것이 가능합니다. 배열, 객체, 함수 등 모든 JavaScript 데이터 타입을 props로 전달할 수 있습니다.
<Modal 글제목={['글1', '글2', '글3']} />위처럼 배열을 넘기면, props.글제목으로 접근 가능하며, 배열의 데이터를 사용할 수 있습니다.
에러가 나는 이유
배열을 넘길 때 문제가 발생하는 주요 이유는 배열에 대한 접근 방식이나 React의 규칙을 위반했을 가능성이 있습니다. 대표적인 사례는 다음과 같습니다:
-
undefined로 전달된 경우- 예:
글제목이 아직 정의되지 않았거나 초기값이 없는 상태에서 넘길 경우undefined가 넘어가 에러가 날 수 있습니다. - 해결:
글제목의 초기값을 설정하세요.let [글제목, 글제목변경] = useState(['글1', '글2', '글3']);
- 예:
-
JSX 내에서 배열을 출력하려다 발생하는 에러
- JSX는 일반적으로 문자열이나 숫자를 렌더링할 수 있습니다. 배열을 직접
{props.글제목}처럼 렌더링하려 하면 React가 배열을 처리하지 못하고 에러가 발생합니다. - 해결: 배열 데이터를
.map()으로 렌더링하세요.props.글제목.map((a, i) => <h4 key={i}>{a}</h4>);
- JSX는 일반적으로 문자열이나 숫자를 렌더링할 수 있습니다. 배열을 직접
정리
배열을 props로 넘기는 것은 문제없지만, 렌더링 과정에서 배열을 어떻게 처리할지 명확히 작성해야 에러가 나지 않습니다.
4. Modal에서 props 사용의 올바른 예
앞서 설명한 내용을 기반으로 Modal 컴포넌트를 다음과 같이 구현할 수 있습니다:
function Modal(props) {
// props로 받은 데이터 활용
let copy = [...props.글제목];
copy[0] = '딱대 코트 추천';
return (
<div className="modal">
<h4>{props.글제목[0]}</h4>
<p>날짜</p>
<p>상세내용</p>
<button
onClick={() => {
props.글제목변경(copy); // state 변경 함수 호출
}}
>
글수정
</button>
</div>
);
}주요 포인트
props.글제목으로 배열에 접근하고, 필요하면 복사본(copy)을 수정해props.글제목변경으로 업데이트합니다.- 배열 데이터를 활용할 때는 React가 변화를 감지할 수 있도록 항상 복사본을 사용하세요.
추가로 드리는 팁
React에서는 props를 넘길 때 다음과 같은 규칙을 따르면 좋습니다:
1. 간결하고 명확한 구조를 유지하세요.
- 여러 개의 데이터를 한꺼번에 넘기려면 객체로 묶어서 넘길 수 있습니다.
이 경우에는<Modal data={{ 글제목, 글제목변경 }} />props.data.글제목처럼 접근합니다.
-
배열이나 객체를 넘길 때 초기값을 꼭 설정하세요.
- 초기값이 없으면 컴포넌트가 렌더링되는 시점에서 에러가 발생할 가능성이 높습니다.
-
렌더링 시
.map()이나 반복문 사용을 고려하세요.- JSX는 배열을 자동으로 렌더링하지 못하므로,
.map()으로 배열을 순회하며 적절한 HTML 구조를 만들어야 합니다.
- JSX는 배열을 자동으로 렌더링하지 못하므로,
GPT선생님한테 리액트 과외 받고 있는 듯...
