본문 바로가기

Frontend

 (290)
[React] counter 실습 import React, { useState } from "react"; function App() { function plus() { const newCount = num + 1; setNum(newCount); } function minus() { const newCount = num - 1; setNum(newCount); } const [num, setNum] = useState(0); return ( {num} 증가 감소 ); } export default App;
[React] State 실습 import React, { useState } from "react"; function App() { // State 를 쓰는 목적 // UI 를 바꾸기 위해서 const [id, setId] = useState(""); const [password, setPassword] = useState(""); const login = () => { alert(`고객님이 입력하신 아이디는 ${id}이며 비밀번호는 ${password}입니다.`); setId(""); // 입력 값 초기화 setPassword(""); }; return ( 아이디 :{" "} 비밀번호 :{" "} 로그인 ); } export default App; 이후 로그인 버튼을 누르면 alert 창이 뜨고 아이디와 비밀번호가 초기화 된다.
[React] State [State] State 란 컴포넌트 내에서 바뀔 수 있는 값을 의미하며, State 를 만들 때에는 useState()를 사용한다. [useState hook] const [ value, setValue ] = useState( 초기값 ) [useState + onClick] 버튼을 누르면, onClickHandler 가 실행되고 초기값("길동이") -> setName("누렁이")로 이름이 변경된다. import React, { useState } from "react"; function App() { const [name, setName] = useState("길동이"); function onClickHandler() { setName("누렁이"); } return ( {name} 버튼 ); } ex..
[React] props 추출 [App.js] import React from "react"; import Child from "Child"; function App() { const name = "test"; return ( children props 입니다. ); } export default App; [Child.js] 구조분해 할당을 통해 파라미터안을 props -> { age, name, children } 으로 작성할 수 있음. import React from "react"; function Child({ age, name, children }) { console.log(age); console.log(name); console.log(children); return Child; } export default Child; ..
[React] children props [children props] childeren props 를 생성하려면, import React from "react"; function App() { return ; } function User(props) { return {props.children}; } export default App; 이처럼 부모 컴포넌트인 App 에 의 형태로 작성해야하나, 아래와 같이 닫고 여는 태그를 작성하여 생성할 수도 있음. import React from "react"; function App() { return 안녕하세요; } function User(props) { return {props.children}; } export default App; 결과는 똑같이 '안녕하세요' 출력 Layout.js 라는 파일을..
[React] 부모-자식 컴포넌트/ props/ prop drilling props 컴포넌트 끼리의 정보 교환 방식으로, 부모 컴포넌트가 자식 컴포넌트에 물려준 데이터를 뜻한다. 1. 컴포넌트는 아래에서 위 방향으로 흐른다. [부모] -> [자식] 으로만 (단방향) 2. props 는 반드시 읽기 전용으로 취급하며, 변경하지 않는다. 컴포넌트의 속성을 props 라고 하며, 이는 파라미터를 통해 부모에서 자식으로 전달해줄 수 있다. import React from "react"; // props 를 통해 부모 -> 자식 데이터가 전달된다. function Son(props) { console.log(props); return ( 나는 {props.motherName}아들이고, {props.grandFatherName}의 손자입니다. ); } // 부모 컴포넌트에서 자식 컴포넌..
[React] 컴포넌트 만들기 다음과 같은 컴포넌트 만들기 나의 코드 import React from "react"; function App() { // const myBtn = () => { alert("클릭!"); }; return ( /* */ {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */} 이곳은 내가 만든 App컴포넌트 입니다. 클릭! ); } export default App; onClick 프로퍼티를 카멜케이스로 작성하고, 다음에 수행할 동작에 대한 함수를 {} 로 감싸서 작성.
[React] 절대경로 설정 절대경로 설정 jsconfig.json 파일 생성 -> 아래와 같이 입력 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 이후 "./App.css" 가 아닌 "App.css" 로 import 해도 정상 작동함. import "App.css"; function App() { return ( Hello REACT! ); } export default App;

티스토리툴바