안녕하세요

테이블 html 태그와 css를 정리합니다. 인라인 스타일의 문제점 {} === {}는 false이기 때문에, 리렌더링시에 인라인 스타일이 적용된 컴포넌트 / 일반태그가 다르다고 판단하여 돔을 새로 그리게 되어 불피요한 리로딩이 발생 style 속성의 재사용성이 떨어짐 [ 출처 ] 컬럼의 width에는 인라인 스타일을 적용하여 코드를 읽기 쉽게 하려고 했으나 리액트에서는 인라인스타일을 추천하지 않는다고 합니다. 하지만 인라인스타일을 함수로 만들어 전달을 하게되면 이 문제가 해결됩니다. const Table = () => { const colWidth = (px) => { const style = { width: `${px}px`, }; return ; }; 테이블 태그로 감싸는걸로 시작합니다. 태그에는 ..

탭메뉴의 컨텐츠들을 컴포넌트로 만들어 스토어 페이지 첫 화면에 모두 볼 수 있도록 합니다. "더보기"를 누르면 해당 컨텐츠의 탭으로이동합니다. 현재 메가티켓 탭의 경우에는 5개 이상의 컨텐츠가 있는데, 본 페이지에서는 4개까지만 표시하기위해서서 컴포넌트에 props로 숫자 4를 전달합니다. 삼항연산자를 이용하여 num !== 4에 해당하는 경우엔 전체 리스트를 나타나도록 하고, 그렇지 않은 경우에는 리스트를 4개만 나타나도록 합니다. {num !== 4 ? ( 전체 {MEGAPICKDATA.length}건 ) : ( "" )} 다른 페이지에서도 같은 방식으로 삼항연산자를 이용해 조건에 따라서 전체 몇 건의 리스트가 있는지 나타나도록 합니다. {num !== 4 ? ( 전체 {MEGAPICKDATA.len..

영화진흥위원회에서 영화 정보를 불러옵니다. const App = () => { const [itm, setItm] = useState(); useEffect(() => { const key = ""; const today = getToday(); const url = `http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${key}&targetDt=${ today - 1 }`; const getMovie = async () => { const res = await axios.get(url); const BOXOFFICE = res.data.boxOfficeResult.dailyBoxOffice..

목표 : 탭메뉴를 만들고 > 각각의 메뉴에 route를 붙여 > link로 이동한 route 페이지에서도 탭메뉴가 나타나도록 합니다. ( 탭메뉴 만들기 ) 탭메뉴의 index 값과 data.id 의 값이 같은 경우에 className에 'on'을 붙여 구현할 것입니다. >>> 페이지를 로딩하면 "전체"를 선택된 메뉴로 만들기 위해서 useState의 초기값은 0으로 설정합니다. const Menus = ({ menuTitle, routeURL }) => { const [num, setNum] = useState(0); >>> DATA에 map()함수를 이용해서 탭메뉴 html을 작성합니다. {menuTitle.map((el, idx) => { return ( >> li의 className에서 삼항연산자를..