react18 리액트 useState 여러 요소 다루기 state 내 여러 요소가 있다면 다음과 같이 관리할 수 있다. 1) 선언 const [inputs, setInputs]=useState({ nickname : '', name : '' }); 여기서는 nickname과 name 2가지 요소를 관리한다. 2) 추출 const {name,nickname} = inputs; inputs 내부의 name과 nickname을 추출하였다. 이제 함수 내부에서 {name}, {nickname}으로 해당 값을 가져올 수 있다. 3) 이벤트 변화 //입력값 출력 const onChange = (e)=>{ const {value,name} = e.target; //타겟의 name과 value 가져오기 console.log(value + " " +name); setInpu.. 2022. 5. 6. 리액트 함수형 컴포넌트 0. 선언 function 컴포넌트명(props){ return ( jsx 문법 ) } export default 컴포넌트명; 1. useState const [number, setNumber] = useState(props.number); state를 세팅할 때 사용한다. 위 코드는 state.number를 props.number로 지정하고, setNumber(변경사항) 은 state의 number를 변경사항으로 변경한다. 2.useEffect useEffect(function(){ render 후 실행, 반환 전 return ( 반환 후 실행 ); }); render 이 후, 컴포넌트 반환 전 실행 return 은 반환 후 실행 (clean up) 3.useRef const nameInput = us.. 2022. 5. 5. 리액트 기초 : Event(2) 이번엔 상위 컴포넌트에서 정의한 메서드를 하위 컴포넌트에서 실행시켜보겠다. 메서드의 경우에도 props를 이용하여 전달받을 수 있다. 1) 상위 컴포넌트의 메서드 하위 컴포넌트에서 실행 상위 컴포넌트에서 hihihi를 alert하는 메서드를 만들고 이를 하위 컴포넌트에서 실행시키고자 한다. App.js /*----중략---*/ /*----중략---*/ Subject.js /*----중략---*/ return ( {this.props.title} {this.props.sub} ); /*----중략---*/ App.js에서 onChangePage라는 function이 alert이 되도록 정의하고, Subject.js에서 클릭 시 props를 이용하여 해당 메서드를 호출하였다. 결과 상단의 WEB 글자를 클릭.. 2022. 5. 4. 리액트 기초 : Event(1) 리액트는 state의 값이 변경되면 render를 재호출하여 유저가 보이는 html을 다시 생성한다. 이번 실습 내용은 mode의 값에 따라 컴포넌트의 랜더링 결과가 변경하도록 하는 것이 목적이다. 1. 클릭 할 때마다 span의 내용이 변경되는 버튼 import './App.css'; import { Component } from 'react'; import Subject from './Subject'; import Toc from './Toc'; import Content from './Content'; class App extends Component { constructor(props){ super(props); this.state={ mode : 'read', subject:{title:"WEB.. 2022. 5. 3. 리액트 기초 : state 1) state vs props props는 사용자가 컴포넌트를 사용하는 입장 state 는 props의 값에 따라 내부 구현에 필요한 데이터 2) 사용 import './App.css'; import { Component } from 'react'; import Subject from './Subject'; import Toc from './Toc'; import Content from './Content'; class App extends Component { constructor(props){ super(props); this.state={ subject:{title:"WEB",sub:'World'} } } render(){ return ( ); } } export default App; 생성자에서.. 2022. 5. 2. 리액트 기초 : Props Props은 리액트에서 속성값을 나타내는 키워드이다. 이를 이용하면 다른 컴포넌트에 변경되는 값을 가져올 수 있다. 1) Subject 컴포넌트에 정의하고 싶은 속성명과 값을 지정한다. import './App.css'; import { Component } from 'react'; import Subject from './Subject'; import Toc from './Toc'; import Content from './Content'; class App extends Component { render(){ return ( ); } } export default App; 2) Subject 컴포넌트에서 {this.prop.속성명}을 사용하여 해당 값을 사용한다. (jsx 문법) import './A.. 2022. 5. 1. 리액트 기초 : Component 1. 컴포넌트 계속적인 div로 복잡한 html을 간결하게 정리정돈하는 도구 2. 컴포넌트 선언 방법 함수형과 클래스형이 있지만 여기서는 클래스형을 이용한다. 1) Content.js import React from "react"; import { Component } from "react"; class Content extends Component{ render(){ return( HTML HTML is HyperText Markup Language ); } } export default Content; 클래스에 React의 Component 클래스를 상속한다. Component 클래스가 가지는 render() 메서드를 구현하는데, 이 곳에 표현하고자 하는 html 요소를 리턴한다. 다은 컴포넌트에서도.. 2022. 4. 30. 리액트 프로젝트 배포 리액트 프로젝트를 그대로 배포하면 용량이 크고 보안 문제가 발생할 수 있다. 단지 hello, react만 출력하는 리액트 프로젝트를 웹에서 실행하고 구글 개발자도구에서 네트워크 탭 하단부분을 살펴보면 2.2 MB 리소스를 다운로드하였다. 이는 리액트가 개발에 용이한 여러가지 기능들을 추가해놓았기 때문이다. 이를 해결하기 위해 프로덕션 모드의 애플리케이션을 생성(build) 하여 배포한다. npm run build 이를 실행하면 builder라는 폴더가 생긴다. 이곳에 생성된 index.html 파일을 살펴보면 코드를 압축시켜 공백을 제거하고 용량을 최소화하였다. 임시 웹서버를 설치하고 npx serve build 디렉터리를 Document Root로 지정하는 옵션을 실행한다. npx serve -s b.. 2022. 4. 29. 이전 1 2 3 다음 반응형
