참고 자료 https://inpa.tistory.com/entry/CSS-%F0%9F%95%B9%EF%B8%8F-%EC%88%98%ED%8F%89-%EC%88%98%EC%A7%81-%EA%B0%80%EB%A1%9C-%EC%84%B8%EB%A1%9C-%EC%A0%95%EB%A0%AC-%EA%B8%B0%EB%B2%95-%F0%9F%92%AF-%EB%AA%A8%EC%9D%8C-%EC%A0%95%EB%A6%AC 🕹️ CSS 요소 수평/수직 정렬 기법 모음 수평 중앙 정렬 📢 inline / inline-block 요소 정렬 대상 요소(inline)의 부모 요소(block)에 text-align: center;를 지정한다. inline, inline-block, inline-table, inline-flex, 기..
React에서 props를 함수의 인수로 전달할 때 중괄호({})를 붙이지 않는 이유는 JavaScript의 구문 규칙에 기인합니다. React에서 props는 JavaScript 객체로 전달됩니다. 일반적으로 객체를 함수에 전달할 때는 중괄호({})를 사용하여 객체를 감싸주는 것이 올바른 구문입니다. 그러나 React에서는 중괄호({})를 사용하지 않는 이유는 JSX 문법과 관련이 있습니다. JSX는 JavaScript를 확장한 문법으로, React 컴포넌트에서 UI를 작성하기 위해 사용됩니다. JSX에서 중괄호({})는 JavaScript 표현식을 나타내는 데 사용됩니다. 중괄호({}) 안에는 JavaScript 표현식을 넣을 수 있고, 그 값은 JSX에서 평가되어 출력됩니다. React에서 컴포넌트..
참고자료 https://stackoverflow.com/questions/33381029/how-to-pass-html-tags-in-props 문제 발생 props로 html 태그를 전송하고 싶었지만 실패하였다 문제 해결 1. html 태그를 배열로 감싸 전달한다 2. html 태그 양 끝에 따옴표를 제거하고 태그만 남긴다. 해결 방법 1번 2번 중 골라 사용하면 된다. 만약 문자열 + 태그 + 문자열 과 같은 방식이라면 배열로 감싸 전달을 해야한다 결과 잘 전달됨
문제발생 리액트에서는 페이지 이동을 원할 때 a태그를 사용을 권장하지 않는다. 이유 - 1. 페이지 새로고침 방지, 2. 내부라우팅, 3. 브라우저 히스토리 관리 위와 같은 이유로 리액트에서는 라우터(Router)라는 라이브러리를 사용하여 페이지 이동을 권장한다. 그렇다면 라우터는 어떻게 사용할까? 문제해결 1. 라우터 다운로드 npm install react-router-dom 2. index.js 수정 (라우터 적용) import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; // 라우터 라이브러리 임포트 import "./index.css"; imp..
위와 같은 CSS 파일이 있다고 가정하자. 파일 관리의 필요성과 컴포넌트 재사용성을 높이기 위해 styled-components 를 도입하기로 하였다. 기존 CSS 파일을 어떻게 styled-components로 변환해야 할까? 방법은 간단하다. CSS 선택자인 클래스 이름으로 styled-componet를 생성하면 된다. 이후 각 선택자들의 CSS스타일을 각 styled-component에 붙여넣어주면 된다.
문제 발견 위와 같이 img 태그 컴포넌트에 src 경로를 직접 설정하면 에러가 발생한다. 이에 넣을 이미지 파일의 경로를 import 하여 props 형태로 전달해야한다 문제 해결 이미지 경로를 import 하여 props 형태로 전달한 결과 에러가 발생하지 않음을 볼 수 있다 결과 이미지가 잘 삽입 되었다.
