본문 바로가기

React

 (57)
[React] Styled Components styled-components 를 사용하기 위해서는 다음과 같은 패키지를 설치한다. yarn add react styled-components 1. css in JS : 자바스크립트로 css 코드를 작성하는방식 style component를 styled.태그 형태로 다음과 같이 작성하고 확인해보면 import "./App.css"; import styled from "styled-components"; const StBox = styled.div` width: 100px; height: 100px; border: 1px solid red; margin: 20px; `; function App() { return 박스; } export default App; 스타일이 잘 적용 된 것을 확인할 수 있다. ..
[React] React Hooks (useEffect), clean up [useEffect] useEffect 는 react 컴포넌트가 렌더링이 될 때마다, 특정 작업을 수행할 수 있게 하는 Hook. 다음 식을 실행시키면, import React, { useEffect, useState } from "react"; const App = () => { const [value, setValue] = useState(""); useEffect(() => { console.log("hello useEffect"); }); return ( { setValue(event.target.value); }} /> ); }; 인풋에 값을 입력할 때마다 useEffect 가 실행되는 것을 볼 수 있으며, 초반에 hello useEffect 가 두번 실행되는 것은, strictmode 때문. ..
[React] React Hooks (useState) [useState] - 가장 기본적인 hook - 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함 - 카운터, ToDoList const [state, setState] = useState(초기값); useState 의 리턴 값은 배열인데, 그 리턴값을 구조분해 할당으로 받아옴. useState 에는 두가지의 업데이트 방식이 있다. 1. 일반형 업데이트 방식 React는 한꺼번에 변경된 내용을 종합해 batch 업데이트를 하기 때문에, 아래의 버튼을 누르면 1씩만 증가함. 렌더링이 잦으면 성능에 이슈가 있는 것이기 때문에 react 는 이 방식을 택함. // src/App.js import { useState } from "react"; const App = () => { const [number, se..
[React] map 메소드 적용/ 오류 해결 map 메소드로 다음과 같이 작성하면 import logo from "./logo.svg"; import "./App.css"; const App = () => { const users = [ { id: 1, age: 30, name: "송중기" }, { id: 2, age: 24, name: "송강" }, { id: 3, age: 21, name: "김유정" }, { id: 4, age: 29, name: "구교환" }, ]; return ( {users.map((v) => { return ( {v.name}-{v.age} ); })} ); }; export default App; css 가 적용된 상태의 이름과 나이값을 담은 li 태그가 생성된다. 그러나 다음과 같은 오류가 발생하는데, map 함수를..
[React] Styling 적용하기 filteredArr 에 value 값이 "옥수수" 인 것만 할당하여 그 값에 스타일을 적용한다. import logo from "./logo.svg"; import "./App.css"; function App() { const testArr = ["감자", "고구마", "오이", "가지", "옥수수"]; const filteredArr = testArr.filter((value) => value === "옥수수"); return ( {filteredArr.map((value) => ( {value} ))} ); } export default App;
[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..

티스토리툴바