본문 바로가기

Frontend

 (290)
[React] State/ 주사위 던지기 [State (스테이트)] 리액트에서 변수같은 역할을하며, 스테이트를 바꾸면 react 가 화면을 새로 랜더링 해줌. import { useState } from 'react'; 스테이트를 사용하려면 리액트에서 useState 함수를 불러와야 한다. 일반적으로 useState 함수는 다음과 같이 작성되며, function App() { const [num, setNum] = useState(1); 파라미터로 초기값 (여기서는 useState(1);) 을 전달받고, 함수가 실행된 후에는 배열의 형태로 요소 2개 (num, setNum)를 리턴한다. 따라서 배열의 destructuring 문법으로 코드를 작성하게 되는 것. 1. 첫번째 요소 (num = state) 배열의 두 요소중 첫번째(num)는 Sta..
[React] children Button.js 를 생성후 다음 코드를 입력한 뒤, function Button({ text }) { // Button 태그 안, text prop 을 보여주는 함수 return {text} } export default Button; App.js 에 text 에 문자열을 할당해주면, import Button from "./Button"; import Dice from "./Dice"; function App() { return ( ); } export default App; 이처럼 버튼을 확인할 수 있음. [children] JSX 문법으로 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children 값에 담기게 된다...
[React] Props [Props] Dice 컴포넌트의 color 속성을 blue 로 지정해보면, import Dice from "./Dice"; function App() { return ( ); } export default App; 다음처럼 개발자 도구 Element 에서 color = "blue" 의 흔적을 찾아볼 수가 없다. 이는 HTML 로 만들어진 속성이 아니기 때문인데, 개발자 도구의 component 에서 속성값을 확인하면, 이처럼 color = "blue" 의 props 를 확인할 수 있는데, 리액트에서는 component 에 지정한 속성을 props 라고 한다. props는 component 에 지정된 모든 속성을 가르키는데, 따라서 각각의 속성은 prop 이라고한다. [component prop 사용하기..
[React] component/ element element 에 태그를 직접 할당한 다음 코드를 실행하면, import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); const element = 안녕 리액트! root.render(element); 아무런 오류 없이 잘 동작하는 것을 확인할 수 있음. [컴포넌트 및 앨리먼트] 다음과 같이 Hello 함수를 element 안에 함수 'Hello' 이름을 가진 태그를 사용할 수 있음. 여기서 Hello 함수를 react component 라고 함. import ReactDOM from 'react-dom/client'; const root = ReactDOM.createR..
[React] 가위바위보(간단버전 2) import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); const WINS = { rock: 'scissor', scissor: 'papaer', paper: 'rock', }; function getResult(left, right) { if (WINS[left] === right) return '승리'; else if (left === WINS[right]) return '패배'; else return '무승부'; } function handleClick() { console.log('가위바위보!'); }; const me = 'rock'; const other =..
[React] JSX 에서 JavaScript 사용하기 [값 할당] 다음처럼 변수 product 에 '맥북' 을 할당하고, 태그 안에 {} 로 감싸서 할당할 수 있다. import ReactDOM from 'react-dom/client'; const product = '맥북'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( 나만의 {product} 주문하기 ); [toUpperCase 메소드] 다음과 같이, 변수이름에 영어를 할당해 줄 수 있는데 import ReactDOM from 'react-dom/client'; const product = 'Macbook'; const root = ReactDOM.createRoot(document.getElementBy..
[React] Fragment 태그 [Fragment 태그] import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( 안녕 리액트! ); 위의 코드를 실행하면 다음처럼 오류가 발생하는데, JSX 요소들은 반드시 하나의 태그로 감싸주어야 한다. import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( 안녕 리액트! , ); 이런식으로 태그로 감싸주거나, import { Fragment } from 'react'; import R..
[React] JSX JSX JavaScript와 HTML 을 섞어서 쓸 수 있는, JavaScript의 확장된 문법 1. JSX 문법에서는 HTML 을 사용할 때, class 대신 className 으로 작성해주어야한다. JavaScript의 class 와 HTML 의 class 가 다르기 때문에, 이런식으로 작성해야함. 2. HTML 속성에서의 for 를 사용하고싶다면, htmlFor 으로 작성해주어야한다. JavaScript의 반복문 for 와 HTML속성의 for 가 다르기 때문에, 이름 이런식으로 작성해야함. 3. 이벤트 핸들러는 두번째 단어부터 대문자 (카멜케이스) 로 작성 여러 단어가 조합된 속성명들은 카멜케이스로 작성해야 한다.

티스토리툴바