React에서 하위 컴포넌트로 props 전달 시, 특정 요소에만 전달하기 원하는 변수가 존재한다. 아래 예시로 가로줄을 구성하는 Row 컴포넌트의 첫번째 줄에만 isLargeRow 변수를 전달해 다른 요소보다 크게 화면에 표현하고 싶다면 하위 컴포넌트에서 isLargeRow 변수의 default값을 false로 지정한 다음 원하는 특정 컴포넌트 요소에만 isLargeRow 변수를 전달해주면된다. 하위 컴포넌트 function Row({ data, isLargeRow = false }) { return( {data.name} ); } export default Row; 상위 컴포넌트로부터 data와 isLargeRow이라는 boolean값을 전달받는 Row 컴포넌트가 존재한다. isLargeRow 변수를..

1. 버튼 클릭 시 useState를 활용해 type의 변수 값을 변경해주고 싶을 때 코드의 중복되는 부분을 함수로 작성해 전달해 주려했는데 무한 반복이 돌아간다. const [type, setType] = useState(''); const handleSortChange = (type) => { setType(type); }; 이는 버튼을 클릭했을 때 함수를 전달하면 발생하는 에러로 button 위 함수가 실행될 때 state를 변화하는 코드이기 때문에 계속 렌더되는 에러가 발생한다. state 변화시킬 땐 아래 방법으로 작성 ( ) => arrow function으로 함수를 전달해주거나 ( ) => 바로 setType() 코드를 작성해 변수를 업데이트 하거나 돔 요소에 id 값을 지정해주고 이벤트 핸..

Summary 1. React 마크다운 에디터 설치 yarn add @uiw/react-md-editor 2. Editor 작성 컴포넌트 import MDEditor from "@uiw/react-md-editor"; const Editor = (props) => { return ( ) } export default Editor; 3. 마크다운 뷰 컴포넌트 import MDEditor from "@uiw/react-md-editor"; const NoticeView = (props) => { return ( ) } export default NoticeView; Result - 에디터 작성 화면 - 마크다운 적용된 뷰 화면 📝 기울기, 굵기, 이미지 등 적용 사항 정상 동작 확인 ✔️ CODE 설명 'r..

| 1. React 설치 프론트앤드 폴더로 이동해 현재 폴더 내부(.)에 react를 설치한다. cd frontend npx create-react-app . | 2. 폰트 선택 fonts.google.com 리액트 설치가 진행되는 동안 구글 폰트.com에 접속하여 프로젝트에 사용될 폰트를 골라 해당 코드를 복사한다. [ 복사한 코드 ] // link 코드 // css 코드 font-family: 'Playfair Display', serif; 해당 코드를 프론트의 public폴더 > index.html 파일 내부에 붙여주면 프로젝트 속 글꼴 지정이 완료된다. index.html에 작성할 css 스타일 코드가 2~3줄로 짧기 때문에 별도의 css 파일을 생성하지 않고 html 문서 내부에 style 코드..