JSX
-
JSX :: React에서 데이터 줄 바꿈, jsx 데이터 줄 바꿈Programming/React 2022. 4. 18. 22:58
오늘은 react로 만드는 포트폴리오를 수정하다가 json데이터에서 줄바꿈을 하는 것에서 어려움을 겪었다. 여기 끝에 보이는 것 처럼 \n을 넣어서 줄바꿈을 시도했는데, 화면에 그대로 \n이 출력될 뿐 줄바꿈이 전혀 되지 않았다. 태그도 역시 마찬가지로 작동하지 않았다. 해결방법은 css에서 해결을 해야 한다. white-space:pre-wrap; 이 style 태그를 넣어주어야 한다. pre-wrap 또는 pre-line을 쓰면 되는데, 이 태그는 공백을 코드에 있는 그대로 표시하도록 하는 태그라고 한다. 이 둘의 차이점은 다음과 같다. pre-wrap : 공백을 코드에 있는 그대로 표시함. 코드에 줄바꿈이 없어도 자동 줄바꿈이 됨 pre-line: 공백을 여러개 넣어도 1개만 표시한다. 코드에 줄바..
-
JSXProgramming/React 2022. 1. 21. 20:47
JSX는 react에서 HTML을 쉽게 사용할 수 있게 해주는 문법 create react app 으로 처음 React 앱을 생성할 때 설치되는 라이브러러리인 babel이 JSX라는 문법 사용할 수 있게 해줌 JSX로 HTML을 작성하면 babel이 자동으로 JSX 코드를 브라우저가 이해할 수 있는 JS 코드로 변환해 줌 JSX의 작동 원리 ReactDOM.render 이 정해진 위치에 원하는 컴포넌트를 렌더링 해줌 ex ) ReactDOM.render(, document.getElementById("root")); 첫 인자로 component를 받고, 두 번째 인자로 실제로 Component를 그릴 위치를 받음 ⇒ public 폴더 안의 index.html 파일에서 id가 root인 div태그를 찾음...