FRONT (31) 썸네일형 리스트형 [React] input 상태 관리하기(input이 한 개일 때, input이 한 개 이상일 때) 1. input 상태 관리하기(input이 한 개일 때) 1) App,js import React from 'react'; import InputSample from './InputSample'; function App() { return ( ); } export default App; 2) InputSample.js input 태그의 value 값도 설정해주는 것이 중요. 그렇게 해야, 상태가 바뀌었을때 input 의 내용도 업데이트 됨 import React, { useState } from 'react'; function InputSample() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.val.. [React] useState를 통해 컴포넌트에서 바뀌는 값 관리 (클릭 이벤트) 1. +1일때 1씩 증가하고 -1일때 1씩 감소하는 UI 만듬 1) Counter.js import React from 'react'; function Counter() { return ( 0 +1 -1 ); } export default Counter; 2) App.js import React from 'react'; import Counter from './Counter'; function App() { return ( ); } export default App; 3) 결과 2. 이벤트 설정 1) Counter.js import React, { useState } from 'react'; //useStare를 사용해서 바뀌는 값을 관리 function Counter() { const [number, .. [React] 조건부 렌더링 조건부 렌더링이란 ? 특정 조건에 따라 다른 결과물을 렌더링 하는 것 1. isSpecial={true} 1) App.js - props 값 설정을 생략하면 ture 한 것과 같다 (isSpecial = isSpecial={true}) import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( ) } export default App; 2) hello.js - 삼항연산자 : isSpecial 값이 true 라면 * 를, 그렇지 않다면 null 을 보여줌 -> null, false, undefined 를 렌더링하게 된다면 아무것도 나타나지 않게됨 import R.. [React] props를 통해 컴포넌트에게 값 전달하는 법 1. props의 기본 사용법 1) App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; 2) Hello.js import React from 'react'; function Hello(props) { return 안녕하세요 {props.name} } export default Hello; 3) 결과 2. defaultProps로 기본값 설정 컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값 설정하면 됨 1) Hello.js import React from 'react'; funct.. [React] JSX의 기본 규칙 1. 꼭 닫혀야 하는 태그 태그를 열었으면 꼭, 이렇게 닫아주어야 한다 2. 꼭 감싸져야 하는 태그 두 개 이상의 태그는 무조건 하나의 태그로 감싸져 있어야 한다 , (Fragment) 등 3. JSX 안에 자바스크립트 값 사용 JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {} 으로 감싸서 보여준다 import React from 'react'; import Hello from './Hello'; function App() { const name = 'react'; return ( {name} ); } export default App; 4. style 사용 import React from 'react'; import Hello from './Hello'; function App() { cons.. [React] 리액트 컴포넌트 만들기(기본) 1. 리액트 불러오기 import React from 'react'; 2. Hello 라는 컴포넌트를 내보내겠다는 의미 export default Hello; 3. Hello 컴포넌트를 App.js에서 불러와 사용 import React from 'react'; import Hello from './Hello'; //Hello.js의 Hello컴포넌트 불러오기 function App() { return ( ); } export default App; [React] Git Bash를 이용하여 리엑트 실행 및 리엑트 파일 만들기 1. Node.js 설치 https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. Yarn 설치 https://classic.yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com 3. Vscode 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor .. [Thymeleaf] header footer side 나누기 (타임리프 기반) 1. 타임리프와 레이아웃을 위한 Dependency gradle에 추가 implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.0.0' 2. 각각 footer.html, header.html, side.html 에 원하는 UI를 코딩 3. layout.html을 만들어 공통적으로 사용하는 레이아웃 만듬 -- : ~{경로 :: 템플릿조각 이름}와 같이 사용하면 된다. (ex) th:fragment="footerFragment" -> 템플릿조각이름 : footerFragment) -- 공통 레이아웃 : layout:f.. 이전 1 2 3 4 다음