전체 글 (99) 썸네일형 리스트형 [기본 자료구조 - Class] 중첩 클래스 중첩 클래스 멤버 클래스 (Member Class) - 인스턴스 내부 클래스, 정적 내부 클래스 지역 클래스 (Local Class) - 지역 내부 클래스 익명 클래스 (Anonymous Class) - 익명 내부 클래스 1. 멤버 클래스 : 선언이 다른 클래스 또는 인터페이스 선언에 의해 직접 둘러싸인 클래스 1) 인스턴스 내부 클래스 : 클래스 안에 선언된 클래스, 즉 필드를 선언하는 위치에 있는 클래스 package ex2_1; public class InnerExam1 { class Cal{ //내부 클래스 int value = 0; public void plus(){ value++; } } 내부 클래스 안에 있는 함수를 쓰기 위해서는 아래 코드와 같이 외부 클래스를 먼저 생성하고, 이후 내부 클.. [React] useRef 로 특정 DOM 선택하기 " 초기화 버튼 눌렀을 때, 커서가 '이름' 인풋박스로 선택되게 하기 " 1) App,js import React from 'react'; import InputSample from './InputSample'; function App() { return ( ); } export default App; 2) InputSample.js - import React, { useState, useRef } from 'react'; - const nameInput = useRef(); - const onReset = () => { setInputs({ name: '', nickname: '' }); nameInput.current.focus(); }; - import React, { useState, useRef.. [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; 이전 1 2 3 4 5 ··· 13 다음