본문 바로가기
728x90

전체 글

[React] 간단한 리스트게시판 생성 2022. 6. 22. 1) input에 입력하고 + 를 클릭시 하나씩 추가 2) X를 누를시 해당번호 삭제 3) 추가된 내용을 클릭시 백그라운드 색상 변경 top 에있는 input 만들기 return ( 전체 화면 표출 내용 CreateTodo const CreateTodo = ({onChange, list, onCreate}) => { return ( to do list {onChange(e.target.value)}} /> + ); };input에서 값을 입력시 실행되는 onChang를 사용해 해당 내용을 e로 받아와 .value 값으로 onChange 실행 const [ list, setList] = useState(""); // input에 값을 입력할때 onChange함수를 실행 // 실행시 state인 list값을..
[React] 클래스 컴포넌트사용 2022. 6. 22. import React, { Component, useEffect, useState } from 'react'; const App4 = (props) => { //클래스 컴포넌트 보이기 const [funcShow, setFuncShow] = useState(true); return ( hello World {setFuncShow(!funcShow)}}/> {funcShow && } ); }; // 클래스 컴포넌트 만들기 class ClassComp extends Component{ //state 생성 //props 값을 state값으로 지정 state = { number : this.props.initNumber, date : new Date().toLocaleTimeString(), } //랜더가 끝..
[React] 라이프사이클 실습(mount,unmount)호출시기 2022. 6. 22. Timer.js import React, { useEffect } from 'react'; const Timer = (props) => { // Mount 할때 호출 // UnMount 할때 호출 // Update 할때 호출 useEffect(() => { const timer = setInterval(()=>{ console.log('타이머 돌아가는중...') },1000) // 리턴안의 값은 unmount 될때 실행 return()=>{ clearInterval(timer); } },[]) return ( 타이머를 실행합니다. ); }; export default Timer; import React, { useState } from 'react'; import Timer from './componen..
[React] 라이프사이클 실습(useEffect) 의 호출시기 2022. 6. 22. import React, { useEffect, useState } from 'react'; const App2 = (props) => { const [ count, setCount ] = useState(1); const [ input, setInput ] = useState(''); useEffect(()=> { console.log('랜더링될때마다 useEffect 호출') }) //useEffect에 두번째 인자로 [] 를 남겨주면 마운트 시에만 호출 useEffect(()=> { console.log('처음 마운트 될때만 useEffect가 호출') },[]) useEffect(()=> { console.log('배열요소안의 값이 업데이트되면 useEffect 호출') },[count]) con..
[React 이론] 라이프 사이클 2022. 6. 22. 함수형 컴포넌트는 Hooks 기능을 사용하여 처리 - 16버전에 새로나왔으며 요즘엔 함수형을 거의 사용 라이프 사이클 메서드 - 클래스 컴포넌트 라이프사이클 - 수명주기 컴포넌트의 수명은 페이지에 랜더링 되기 전인 준비 과정에서 시작해서 페이지에서 사라질때 끝남 Hooks 1)useState 2)useRef 3)useEffect 라이프사이클의 수명주기는 3가지로 구분 1. 마운트 : 페이지에 컴포넌트가 나타남 constructer 컴포넌트를 새로 만들때 마다 호출되는 클래스 생성자 메서드 -> getDerivedStataFromProps : props에 있는 값을 state에 넣을때 사용되는 메서드 -> render : 준비한 UI를 랜더링하는 메서드 -> componentDidMount : 컴포넌트가 ..
[React] ref로 접근하기 2022. 6. 22. 자바스크립트처럼 document.quertSelect로 접근이 불가능하기에 ref로 이름을 달아서 접근을 할 수 있다. ref(reference)[참조의 줄임말] : DOM에 이름달기 1. class형태에서의 사용방법 1) ref 객체 생성 const 이름 = React.createRef(); 으로 선언 2) DOM 요소 ref 속성으로 지정 으로 사용(태그안에 적으면됨) 3) DOM요소 접근 this.이름.current / current가 input을 가지고 있음. value값이 사용가능해짐 2. 함수형 컴포넌트에서의 사용방법 1) useRef import import { useRef } from 'react'; 2) ref 객체 const 이름 = useRef(); 3) DOM요소 지정 클래스가 아니..
[react] props,state 값 받아오고 사용 2022. 6. 21. const App = () => { return children 속성 자리 } const MyComponent = ({name, age, children}) => { return 제 이름은 {name} 입니다. 제 나이는 {age} 입니다. {children} } 선언을 두번씩 할 필요없이 한번에 바로 받을 수 있다. class Mycomponent extends Component { const {name, age, children} = this.props; render( return() ) } 기본값 받기 MyComponent.defaultProps ={ name : '기본이름', age : 20, } 받아오는 값의 타입을 설정할 수 있다. ( 타입 설정시 import를 해줘야 함) import Pro..
[React] 기초 2022. 6. 20. React - 웹 프레임워크 자바스크립트의 라이브러리중 하나 - 사용자의 인터페이스를 만들기 위해 사용됨 - facebook 에서 제공해주는 프론트엔드 라이브러리 - 싱글페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용 - 웹/앱의 View를 개발할 수 있는 라이브러리 html, css, javascript --> 앵귤러, 뷰, 리액트( 3개 중 하나만 해도 나머진 금방 배울 수 있음) React 특징 Data Flow react는 데이터의 흐름이 한 방향으로 흐르는 단방향 데이터 흐름을 가진다. Component 기반 구조 component는 독립적인 단위의 소프트웨어 모듈을 말한다. - 독립적인 하나의 부품으로 만드는 방법 - 기능별로 하나의 component를 이용해 조립하 듯 사용한다. - ..
728x90

티스토리툴바