FrontEnd/React
-
input을 활용한 useStateFrontEnd/React 2022. 9. 3. 10:31
먼저 App 컴포넌트에 InputSample 컴포넌트를 렌더링하게 설정합니다. import React, { useState } from "react"; function InputSample() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); } const onReset = () => { setText(''); } return ( 초기화 값: {text} ); } export default InputSample; 해당 컴포넌트에서 useState를 활용할수 있게 다음과 같이 입력합니다. onChange 라는 함수에 e라는 값을 받으면 그것을 해당 타겟 value 값에 넣어서 setText로 넘..
-
useState를 통해 컴포넌트 값 바꾸기FrontEnd/React 2022. 9. 2. 17:01
리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었지만 이후로는 Hooks 라는 기능을 통해 함수형 컴포넌트에서도 상태를 관리 할수 있게 되었습니다. 버튼을 누르면 숫자가 바뀌는 예제를 만들어 보겠습니다 import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {number} +1 -1 ); } export default Counter; React 패키지에..
-
조건부 렌더링FrontEnd/React 2022. 9. 2. 10:05
특정 조건에 따라 다른 결과물을 렌더링 하는 것을 조건부 렌더링 이라고 합니다. function App() { return ( ); } 위와 같이 isSpecial 이라는 props를 설정하여 Hello 컴포넌트로 사용해보겠습니다. function Hello({ color, name, isSpecial }) { return ( {isSpecial ? * : null} 안녕하세요 {name} ) } 상항연산자를 활용해서 isSpecial이 true면 *을 출력하고 false면 null로 아무것도 출력하지 않게 조건을 걸겠습니다. App 컴포넌트에서 isSpecial에 true 값을 줬기 때문에 결과값은 *가 출력 됩니다.
-
props.childrenFrontEnd/React 2022. 9. 1. 13:44
컴포넌트 태그 사이에 넣은 값을 출력하고 싶을 때 props.children을 사용하면 출력이 가능합니다. function App() { return ( ); } Wrapper 이라는 컴포넌트로 여러 컴포넌트를 감싸고 안에 있는 내용을 출력하고 싶을때 props.children을 사용합니다. function Wrapper({ children }) { const style = { border: '2px solid black', padding: '16px', }; return ( {children} ) } 비구조화 할당 문법을 사용하여 다음과 같이 표기하면 다음과 같이 출력됩니다!
-
Componet 내부에서 Style 사용하기!FrontEnd/React 2022. 8. 31. 09:28
import './App.css'; import Hello from './components/Hello' function App() { const name = 'react'; const style = { backgroundColor: 'black', color: 'aqua', fontSize: 24, // 기본단위 px padding: '1rem',// 다른 단위 사용 시 문자열로 설정 } return ( {name} ); } export default App; 인라인 스타일은 객체 형태로 작성 해야 합니다. 그리고 네이밍을 camelCase 형태로 네이밍 해야합니다. 그럼 위와 같이 출력 됩니다!