React (3) 썸네일형 리스트형 [React] 컴포넌트와 props 사용하기2 : 컴포넌트안에 페이지 별 다른 내용 넣기, 컴포넌트 스타일 다르게 하기 컴포넌트를 만들어 사용하다보니 아래와 같은 고민점이 생겼다. 1. 레이아웃은 같은데 레이아웃 안에 스타일이 다른 내용이 추가되어야 하는 상황 2. 같은 레이아웃이지만 스타일이 다른 상황 1번의 경우 {props.children}를 사용하여 컴포넌트 안에 마크업을 할 수 있도록 할 수 있다. 2번의 경우 className을 props로 만들어, 해당 클래스를 가진 props에 스타일링을 해 주었다. 모달을 컴포넌트로 만들어보았다. [Component] const Modal = (props) => { return ( {props.title} {props.desc} {props.children} ) } export default Modal 모달 별로 사이즈가 달라 {styles.modal_content}에 사.. [React] 컴포넌트와 props 사용하기1 아래 이미지와 같이 게시물이 없을때 노출되는 화면에서 보여지는 레이아웃의 스타일은 같고, 이미지와 텍스트만 달라지는 경우 컴포넌트와 props를 적용해보았다. [components] function NoResult(props) { return ( {props.text} ) } export default NoResult 화면 레이아웃 마크업을 해주고, 같은 레이아웃 내에서 변경될 부분 에 props를 적용해주었다. img 의 URL : {props.url} 하단 텍스트 : {props.text} +) 컴포넌트는 무조건 최상위 태그가 있어야하고, 최상위 태그가 필요없을 시 으로 감싸 줄 수 있다 [page] //event.js import NoResult from '../../../../components/.. [React] 셀렉트 박스 오류 : [warning]Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>. 아래 사진과 같이 select Box 클릭 전에 "문의유형을 선택해주세요" 가 보이고, 클릭 후 옵션에는 보이지 않게 하고 싶었다. [오류코드] 문의유형을 선택해주세요 회원정보 이용안내 오류/불편 이벤트 제휴 기타 위와 같이 해당 option에 selected를 넣었을때 아래와 같은 콘솔 오류가 났다. [warning]Use the `defaultValue` or `value` props on instead of setting `selected` on . [해결코드] 문의유형을 선택해주세요 회원정보 이용안내 오류/불편 이벤트 제휴 기타 옵션에 selected를 넣는 대신, 최상단 select 에 defaultValue="default"를 넣는 것으로 해결하였다. 이전 1 다음