Programming/React
-
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개만 표시한다. 코드에 줄바..
-
React에서 Event 처리하기Programming/React 2022. 1. 24. 22:29
React에서는 HTML과 달리 이벤트명에 camelCase를 사용하여야 하며, 함수 자체를 이벤트 핸들러에 전달해야 한다. 안녕하세요 button의 value값은 event 객체에서 접근이 가능함. 이벤트 핸들러(onClick, onSubmit ...)에 함수를 연결하면 함수의 첫 인자로 event 객체를 전달함. const handleClick = (e) =>{ console.log(e.target.value); } e라는 이벤트 객체에서 ⇒ target이라는 클릭이 된 특정 객체를 가져오고 ⇒ 그 객체의 value를 가져옴
-
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태그를 찾음...
-
React 설치 , 개발 환경 세팅 , React 첫 프로젝트 시작하기(Window)Programming/React 2022. 1. 21. 19:33
오늘은 리액트를 설치하고, 개발 환경을 세팅하고 React의 첫 프로젝트를 시작해보는 법을 정리해보려고 한다. 그리고 중간 중간 겪었던 문제점들도 해결할 수 있게 정리! 1. Nodejs 설치 우선 Nodejs를 설치해야 한다. 최신버전은 하기 링크에서 다운받을 수 있다. https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치 경로는 자동으로 C드라브로 잡힐텐데, 변경하지 않고 그대로 두면 된다. 2. Visual Studio Code 설치 visual studio code를 설치한다. 설치 링크는 하기 링크에서 다운받을 ..