React12 리액트에서 디자인 적용하는 방법과 팁 사실 CSS 파일을 불러오거나 이미지 파일을 불러오는 기능은 리액트 고유의 기능이 아니라 Create React App이라는 프로그램이 대신 설정해 준 기능입니다. (참고: Create React App 문서) 디자인을 적용하는 방법 이미지 불러오기 이미지 파일은 import 구문을 통해 불러오고, 불러온 이미지 주소를 src 속성으로 사용하면 됩니다. import diceImg from './assets/dice.png'; function Dice() { return ; } export default App; 인라인 스타일 리액트에서 인라인 스타일은 문자열이 아닌 객체형으로 사용합니다. 프로퍼티 이름은 CSS 속성 이름으로, 프로퍼티 값은 CSS 속성 값으로 쓰는데요, 이때 프로퍼티 이름은 아래의 bo.. 2023. 11. 23. 리액트 스테이트(State) 정리 State state는 리액트에서 화면을 그려내는 데 굉장히 중요한 역할을 합니다. State라는 단어는 한국어로 '상태'라는 뜻이 있는데요. 리액트에서의 state도 그 의미가 다르지 않습니다. 상태가 바뀔 때마다 화면을 새롭게 그려내는 방식으로 동작을 하는 것이죠. 리액트에서 state를 만들고, state를 바꾸기 위해서는 일단 useState라는 함수를 활용해야 합니다. import { useState } from 'react'; // ... const [num, setNum] = useState(1); // ... 보통 이렇게 Destructuring 문법으로 작성하는데요. useState 함수가 초깃값을 아규먼트로 받고 그에 따른 실행 결과로 요소 2개를 가진 배열의 형태로 리턴을 하기 때문입.. 2023. 11. 22. 리액트 Props 정리 Props JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에도 속성을 지정할 수 있는데요. 리액트에서 이렇게 컴포넌트에 지정한 속성들을 Props라고 부릅니다. Props는 Properties의 약자인데요. 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달됩니다. App.js import Dice from './Dice'; function App() { return ( ); } export default App; Dice.js import diceBlue01 from './assets/dice-blue-1.svg'; function Dice(props) { console.log(props) return ; } export default Dice;.. 2023. 11. 22. JSX 문법 설명 JSX란? JSX는 자바스크립트의 확장 문법인데요. 리액트로 코드를 작성할 때 HTML 문법과 비슷한 이 JSX 문법을 활용하면 훨씬 더 편리하게 화면에 나타낼 코드를 작성할 수가 있게 됩니다. import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( 안녕 리액트! ); JSX 문법 JSX는 자바스크립트로 HTML과 같은 문법을 사용할 수 있도록 만들어주는 편리한 문법이지만, 그만큼 꼭 지켜야 할 규칙들도 있습니다. HTML과 다른 속성명 1. 속성명은 카멜 케이스로 작성하기! JSX 문법에서도 태그에 속성을 지정해 줄 수 있습니다. 단, 여러 단.. 2023. 11. 21. 이전 1 2 3 다음