전체 글107 React) Hook -useState useState를 배우고 쓰고있지만.. 아직까지 너무 혼란..(?) 스러워 이렇게 정리를 해본다..😂😂👊 Hook이란? : 클래스 컴포넌트에서만 사용할 수 있었던 상태관리와 라이프사이클 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해 주는 함수이다. Hook을 사용할때 규칙 2가지 1. Hook은 함수 컴포넌트 혹은 custom hook안에서만 호출할 수 있고, 2. 함수 컴포넌트 내의 최상위에서만 호출해야한다 React 에서 State란? - 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값으로 UI에 보여줄 정보를 결정할 때 사용할 수 있다. - 컴포넌트 내부에 있어서 내에서 정의및 사용을 하고 얼마든지 변경할 수 있다. 어떻게 사용할까? //Main.js import React from 'r.. 2023. 1. 27. React) Router React는 SPA이다. SPA (Single Page Application) 여기서 Application이란? 유저랑 상호작용할 수 있는 웹페이지를 의미한다. 웹페이지 경로마다 브라우저가 HTML을 다운받아서 브라우저 화면에 그려야 하는데, 전체 웹사이트에 HTML이 딱 하나 있으면 그릴 수 있는 웹페이지도 하나밖에 없을 것이라 생각할 수 있다. React는 HTML 파일이 1개가 존재하지만, UI를 구성하는 코드는 javascript 파일에 있다. 이 파일은 index.html의 태그 중에 id 선택자가 root인 div태그에 DOM으로 연결되어 화면에 그려지므로, HTML 파일은 하나만 있어도 javascript 파일이 여러개 있으면 MPA 처럼 여러페이지를 브라우저 화면에 나타낼 수 있고, 하나의.. 2023. 1. 27. JSX 특징 JSX 란? : React에서 사용하는 자바스크립트 확장 문법으로써, HTML과 Javascript를 섞어놓은듯한 형태이다. : JSX는 자바스크립트 내에서 마크업을 작성할 수 있고, 로직도 함께 작성할 수 있는 장점을 가지고 있다. 특징 1. JSX 는 자바스크립트의 값(vlaue) 이다. : 값이라고 하면, 특정한 변수에 이 값을 담을 수 있고, 함수의 인자로 전달하거나, 함수의 리턴값으로 사용할 수도 있다. 2. JSX는 자바스크립트 값을 포함할 수 있다. : JSX에서 자바스크립트 값을 사용하려면 {} 중괄호를 이용하여 자바스크립트의 값을 감싸주면 된다. name 이라는 변수를 선언하고, Hayley Lee 라는 값을 할당하였다. 이때, JSX 안에서 이 값을 사용하기 위해 {name} if문, .. 2023. 1. 25. React) Use State (예제 2개 포함) State? : 컴포넌트가 가질 수 있는 상태 useState? : 우리 컴포넌트의 상태를 간편하게 생성하고, 업데이트 시킬 수 있게 해 주는 도구를 제공해 준다. const [state, setState] = useState(초기값); // state 생성과 함께 가져야할 초기값을 useSate 함수의 인자로 넣어주면 //state와 setState라는 두가지 요소를 배열 형태로 return 해 준다. - state(변수) : 현재 상태 값 - setState(함수) : state를 변경시켜주고 싶을 때 더보기 예시) const [time, setTime] = useState(5); // 컴포넌트 안에는 time 이라는 state 가 생성되고, 초기값은 5시 를 갖게됨 // 이때, 시간을 변경하고 싶으.. 2023. 1. 24. Virtual Dom & React 브라우저를 통해 웹사이트에 들어가면 html 의 element들과 그 것들을 담고 있는 document 를 웹페이지라고 하는데, 브라우저는 이 웹페이지에 해당하는 html을 분석해서 화면에 나타나게 해 준다. DOM (document object model) DOM 이란, 웹페이지에 들어가 있는 html 요소들을 tree 형태의 구조로 표현한 것이다. 이 DOM tree 안에는 각각 요소(element)에 상응하는 노드가 들어있는데 , 개발자들은 이 DOM이 제공하는 API 를 통해 DOM에 접근을 하고, 원하는 요소의 구조,스타일, 내용 등 을 원하는대로 변경할 수 있는 DOM 조작을 할 수 있다. 만약 자바스크립트를 이용한다면, getElementbyId() 혹은 quarySelecort() API를.. 2023. 1. 22. React) input 이용하여 로그인 구현하기 1. ID 에서 onChange event가 발생합니다. {}} 2. event 발생 시 saveUserId 함수가 실행됩니다. {saveUserId}} 3. saveUserId 함수는 이벤트를 인자로 받습니다. {saveUserId(e)}} 4. event가 일어난 요소에 담긴 value 값(event.target.value)을 state에 저장합니다. const [inputId, setInputId] = useState (''); function saveUserId(e) { setInputId('e.target.value'); } 5. 위의 과정을 Password 에도 동일하게 적용합니다. import React, { useState } from "react"; const Login = (a) => .. 2023. 1. 21. 이전 1 ··· 14 15 16 17 18 다음
