반응형 웹/React17 [React] State로 사용자 입력 관리하기1 이번에는 state로 사용자의 입력을 관리해볼 것이다. 간단한 예시로 회원가입 컴포넌트를 만들어 보았다.//Register.jsimport React, { useState } from "react";//간단한 회원가입 폼//1. 이름//2. 생년월일//3. 국적//4. 자기소개const Register = () => { return ( );};export default Register;먼저 인풋에 들어오는 값으로 사용자의 이름을 설정해보자.//Register.jsimport React, { useState } from "react";//간단한 회원가입 폼//1. 이름//2. 생년월일//3. 국적//4. 자기소개const Register = () => { const [name.. 2024. 7. 18. [React] State를 props로 전달하기 이번에는 State를 컴포넌트의 props로 전달해보는 시간을 가질 것이다.//App.jsimport { useState } from "react";import "./App.css";const Bulb = ({ light }) => { return {light ? 😐 : 😑};};function App() { const [count, setCount] = useState(5); const [light, setLight] = useState(false); return ( setLight(!light)}> 현재 상태: {light ? "ON" : "OFF"} {count} .. 2024. 7. 18. [React] State로 상태관리하기 //App.jsimport { useState } from "react";import "./App.css";function App() { const state = useState(); console.log(state); return ;}export default App;결과를 두개의 요소가 들어있는 배열이 출력된다. 첫번째 값은 undefined로 값이 없고 두번째 요소 함수가 들어있는 것을 볼 수 있다. 첫번째 요소는 새롭게 생성된 state의 값이다. 만약 우리가 새로운 state를 생성하고 초기값을 숫자 5라고 설정한 뒤 콘솔로그를 통해서 확인해보면 이제는 첫번째 요소는 5가 나오는 것을 볼 수 있다. //App.jsimport { useState } from "react";import "./.. 2024. 7. 18. [React] Event Handling 이벤트란 웹 페이지 내부에서 발생하는 사용자의 모든 행동ex) 스크롤 내리기, 버튼 누르기, 메세지 입력이벤트 핸들링은 웹에서 발생한 이벤트를 처리하는 것 예를 들어서 버튼의 클릭이라는 이벤트가 발생했을 때 이벤트 핸들러는 onClick = {함수}를 버튼 태그 안에 작성하면 된다.여기서 함수는 함수의 결과를 전달하는 것이 아니라 함수 자체를 전달하는 것이다. (함수 이름만 쓰는 거야) 그리고 이벤트 객체라는 것이 존재한다.리액트에서 발생하는 모든 이벤트는 이벤트 핸들러 함수를 호출하면서 호출된 이벤트 핸들러 함수에 매개변수로 이벤트 객체라는 것을 제공함.출력해보면 SyntheticBaseEvent 라는 객체가 나옴. 한국말로 합성 이벤트 객체합성 이벤트는 모든 웹 브라우저의 이벤트 객체를 하나로 통일한.. 2024. 7. 18. [React] JSX로 UI 표현하기 리액트에서는 자바스크립트랑 HTML을 섞어서 사용 가능함그래서 그냥 리턴하는걸 넘어서 컴포넌트 내부에 변수도 선언하고 해당 변수를 HTML 태그 안에서 중괄호로 묶어서 사용 가능중괄호 안에서 변수, 문자열 작성, 연산, 삼항 연산자도 사용가능 //App.jsimport "./App.css";function App() { const abc = "hello"; const def = 20; return ( {abc} {def} {def + 20} {abc + " world"} {def > 20 ? 1 : -1} );}export default App;주의 1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있음 - 한 줄의 코드가 하나의 값으로.. 2024. 7. 18. [React] React Components 리액트에서는 자바 스크립트 함수가 HTML 태그를 반환하게 설정할 수 있다. 그리고 이러한 함수들을 '컴포넌트'라고 부른다. 컴포넌트의 이름은 함수의 이름을 따서 부른다. 만약 함수의 이름이 Header 라면 Header 컴포넌트라고 부른다. 함수를 선언할 때(컴포넌트를 만들 때)는 함수 선언식을 써도 되고 화살표 함수식을 써도 상관 없다. 주의1. 컴포넌트를 생성하는 함수의 이름의 첫 글자는 무조건 대문자- 그렇지 않으면 리액트는 내부적으로 해당 함수가 컴포넌트라는 것을 인지하지 못함 만약 내가 Header 라는 컴포넌트를 만들었고 이를 렌더링하려면?index.jsx(혹은 main.jsx) 가보면 가 렌더링 되고 있음. 따라서 App컴포넌트는 잘 렌더링 됨.//index.jsximport React f.. 2024. 7. 18. 이전 1 2 3 다음 반응형
