프로그래밍/React
[React] 리액트 State Hook과 Effect Hook
[React] 리액트 State Hook과 Effect Hook
2022.01.03🎯 State Hook과 Effect Hook 📝 State Hook const App = () => { // 일반적인 useState 사용법 const [state이름, setState이름] = useState(초기값) } useState는 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook이다. 최초에 useState가 호출될 때 초기값으로 설정되며 이후 재 렌더링이 될 경우 무시된다. state는 읽기 전용이므로 직접 수정 금지!!!! state를 변경하기 위해서는 setState를 이용 state가 변경되면 자동으로 컴포넌트가 재 렌더링 된다. const App = () => { const [title, setTitle] = useState("") // State를 변경할 값을 직접 입력 set..
[React] 리액트 클래스 컴포넌트에 이벤트 정의하기
[React] 리액트 클래스 컴포넌트에 이벤트 정의하기
2022.01.03🎯 클래스 컴포넌트에 이벤트 정의 방법 함수를 이벤트 바인딩을 하지 않으면 해당 함수가 어떤 함수인지 알 수 없기 때문에 바인딩을 꼭 해줘야 한다. constructor()와 render()사이에 이벤트를 정의한다. 이벤트 명 = () =>{ //이벤트 기능 } constructor()에서 정의한 이벤트를 바인딩해준다. this.이벤트명 = this.이벤트명.bind(this); render()내에서 이벤트를 호출. 📝 메소드에서 이벤트 바인딩 // 화살표 함수를 사용한 이벤트 핸들러 onClick={(e)=>this.이벤트명(매개변수, e)} // bind()함수를 사용한 이벤트 핸들러 onClick={this.이벤트명.bind(this, 매개변수)} 화살표 함수를 사용하면 명시적으로 인자 e를 제공해..
[React] 리액트 클래스형 컴포넌트 setState 사용하기
[React] 리액트 클래스형 컴포넌트 setState 사용하기
2022.01.03🎯 클래스형 컴포넌트 setState 사용하기 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; class InputUserData extends React.Component { constructor(props) { super(props); this.state = { name: "홍길동", job: "developer" }; } //name 데이터를 변경하는 메소드 onNameHandler = event => { //setState를 사용해 name 데이터 업데이트 기능을 구..
[React] 리액트 생명주기란?
[React] 리액트 생명주기란?
2022.01.03🎯 리액트 생명주기란? 생명주기란 앱이 실행되고 종료되는 과정을 특정 시점 별로 나눠둔 것을 말한다. React의 생명주기는 컴포넌트가 이벤트를 다룰 수 있는 특정 시점을 말하며 마운트, 업데이트, 언마운트 상태로 구성되어 있다. 컴포넌트가 실제 DOM에 삽입되는 것을 마운트 컴포넌트가 변하는 것을 업데이트 컴포넌트가 DOM 상에서 제거되는 것을 언마운트 📝 생명주기 메소드 컴포넌트는 생성->업데이트->제거의 생명주기를 지닌다. constructor(): State 데이터를 초기화하는 메소드 render(): 클래스 컴포넌트에서 반드시 구현되어야 하는 메소드 componentDidMount(): 컴포넌트가 마운트 된 직후 호출되는 메소드 componentDidUpdate(): 업데이트가 진행된 직후에 호..
[React] 리액트에서 이벤트를 다루는 방법
[React] 리액트에서 이벤트를 다루는 방법
2022.01.03🎯 리액트에서 이벤트 다루는 방법 리액트에서 이벤트의 이름은 카멜(Camel) 표기법으로 사용한다. 문자열이 아닌 JSX 함수명으로 전달한다. (onClick={함수명}) 📝 이벤트 처리(핸들링) 방법 이벤트를 실행할 코드를 그대로 전달하는 것이 아니라 아래 onClick처럼 함수의 형태로 객체를 전달한다. 📕 핸들링 함수 선언 const App = () => { const handleClick = () => { alert("클릭했습니다."); } return ( 클릭하세요 ); }; 별도의 핸들링 함수를 선언하고 Element에 넘겨주는 방법 📕 익명 함수로 처리 const App = () => { return ( { alert('클릭했습니다.') }}>클릭하세요 ) } 이벤트를 할당하는 부분에서 익명..
[React] 리액트 State란?
[React] 리액트 State란?
2022.01.03🎯 리액트 State란? import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( 버튼을 {count}번 눌렀습니다. setCount(count + 1)}>클릭 ); } State는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다. 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다. State 값이 변경되고 재 렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링 한다. 📝 state 사용하기 import { useState } from "react"; const App = () => {..
[React] 리액트 Props란?
[React] 리액트 Props란?
2022.01.03🎯 리액트 Props란? 📝 props란? // 컴포넌트 생성 const Welcome = (props) => { retutn Hello, {props.name}; } // 컴포넌트 사용 const App = () => { return ; } 기본적으로 Component에 원하는 값을 넘겨줄 때 사용하며 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavaScript의 요소라면 제한이 없다. 주로 Component의 ‘재사용’을 위하여 사용한다. 📝 props는 읽기 전용이다. // props 값 변경 금지!!!!!!!!!!XXXXXXXXXXXXXXXXXXX const Welcome = (props) => { props.name = props.name + "님"; return Hello, {pro..
[React] 리액트 컴포넌트와 Props
[React] 리액트 컴포넌트와 Props
2021.12.30🎯 리액트에서 Component란? 📝 Component란 컴포넌트는 UI의 조각이다. 컴포넌트를 활용하여 엘리먼트를 독립적으로 만들어줄 수 있다. = 엘리먼트의 재사용성을 높여준다. 즉, 독립적, 재사용 가능한 코드의 조각이다. 앱의 기능을 단위별로 캡슐화하는 React의 기본 단위 Component의 이름은 대문자로 시작 React는 소문자로 시작하는 컴포넌트를 DOM태그로 처리한다. Class Component / Function Component로 나뉨 Controlled Component / Uncontrolled Component const MyComponent = ({ children }) => { return ( {children} ); }; const App = () => { return..
[React] 리액트 JSX
[React] 리액트 JSX
2021.12.30🎯 JSX 📝 JSX const App = () => { return ( Hi 하이~ 비와이~ ); }; JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장이다. HTML과 비슷하게 생겼으나 JavaScript이고 HTML과 다른 부분이 있다. JSX는 Babel에 의해서 Transcompile 된다. 📕 JSX 장점 개발자 편의성 향상 협업에 용이 / 생산성 향상 문법 오류와 코드량 감소 📝 JSX 특징 / HTML과 차이점 📕 HTML 태그 내에 JavaScript 연산 const App = () => { const a = 3; const b = 6; return {a} + {b} = {a+b} }; 📕 class → className {name}님 안녕하세요 반..
[React / Error] 리액트 Module not found: Error: Can't resolve 'react' in 에러 해결 방법
[React / Error] 리액트 Module not found: Error: Can't resolve 'react' in 에러 해결 방법
2021.10.23🎯 Module not found: Error: Can't resolve 'react' in 해결 방법 📝 npm 사용자 package-lock.json 삭제 node_modules 폴더 삭제 npm install 📝 yarn 사용자 yarn.lock삭제 node_modules 폴더 삭제 yarn install
[React] 리액트 ToDoList 만들기 :: 컴포넌트 만들기
[React] 리액트 ToDoList 만들기 :: 컴포넌트 만들기
2021.10.08🎯 React ToDoList - 컴포넌트 만들기 벨로퍼트님의 리액트를 사용하여 멋진 투두리스트를 보고 학습한 내용입니다. 📝 cra설정 npx create-react-app react-todolist npm i react-icons styled-components 기존 폴더에서 cra create-react-app . 📝 컴포넌트 역할 📕 TodoTemplate 투두리스트의 레이아웃을 설정하는 컴포넌트이다. 페이지 중앙에 그림자가 적용된 흰색 박스를 보여준다. 📕 TodoHead 오늘의 날짜와 요일을 보여주고, 앞으로 해야 할 일이 몇 개 남았는지 보여준다. 📕 TodoList 할 일에 대한 정보가 들어있는 todos 배열을 내장 함수 map을 사용하여 여러 개의 TodoItem 컴포넌트를 렌더링 해준..
[React] Ref로 DOM 다루기 :: useRef
[React] Ref로 DOM 다루기 :: useRef
2021.09.14🎯 useRef JS에는 document.get~/query~를 사용해서 DOM 다룬다. React에서는 useRef()hook 함수를 사용한다. 특정 DOM을 가리킬 때 사용하는 Hook 함수. 리액트에서 document api를 이용해서 DOM을 다루면 비효율이 나올 수 있다. 📝 화면 뜨자마자 input에 포커스 주기 const rootElement = document.getElementById('root'); const App = () => { const inputRef = React.useRef(); const divRef = React.useRef(); React.useEffect(() => { inputRef.current.focus(); setTimeout(() => { divRef.cur..