컴포넌트

목표 부모 컴포넌트가 자식 컴포넌트를 호출할 때, 자식 컴포넌트는 부모 컴포넌트에서 정의된 state 사용이 필요할 수 있다. 이 때 props 파라미터를 이용하여 부모 state를 가져와 보자. 부모->자식 state 전송 1. 자식 컴포넌트 호출 시, 호출 태그 내부에 전송할 state 작성 let [글제목,글제목변경] = useState(['나_Hi','다_안녕하세요','가_채로입니다']); { modal==true?:null } 위 코드는 부모 컴포넌트가 Modal이라는 컴포넌트를 호출하고 있는 것이다. 글제목이라는 state를 글제목이라는 이름으로 자식 컴포넌트에 전송하고 있다. 또한 color와 같이 state는 아니지만, 이와 같은 방식으로 자식 컴포넌트에 문자열이나 함수, 수등을 전송할 수..

위와 같은 모달을 페이지에 작성하고 싶다. 그런데 해당 모달은 한 페이지에서 많게는 수십개가 쓰일 수도 있다. 이런 경우 하나 하나 모두 코드로 작성하기에는 부담되기도 하고, 양이 많아질 수록 어떤 코드가 어떤 모달을 가리키는지 판단하기가 어려워진다. 이런 문제를 좀 더 간편히 하기위해 나온 것이 Component다. Component 선언 function Modal(){ return ( 제목 날짜 상세내용 ) } export default Modal; let Modal = () => { return( 제목 날짜 상세내용 ) } export default Modal; 둘 중 어떤 것을 작성해도 똑같이 작동한다. 단, return 안의 문장은 하나의 로 묶여있어야 한다. 최외곽의 안에 다른 나 태그들이 병..