< devHyebin/>

React Router v6은 2021년 11월에 나왔습니다. (주의: 현업에서는 새로운 버전이 나왔다고 해서 바로 적용하지는 않습니다.) 리액트에서 갑자기 라우터는 뭐고 왜 배워야 할까? URL에 따라서 그에 상응하는 화면을 전송해주는 것을 Routing이라고 한다. 리액트는 SPA 방식에서는 오직 하나의 페이지만 가지고 있기 때문에 MPA 방식으로의 페이지 이동이 불가능하다. 왜냐하면, 페이지 (html)가 아닌 데이터를 가지는 JS 파일로 구성이 되어 있기 때문이다. ​React-Router는 페이지를 새로 불러오지 않는 상황에서 각각의 선택에 따라서 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다. 1. 터미널 열어서 npm install react-rout..

useEffect의 Clean up? : useEffect 안에서 리턴할 수 있는 함수로, 컴포넌트가 언마운트 되기 전에 코드를 청소하는 것이다. # 실습: 계속 돌아가는 타이머 멈추기 App.jsx import Timer from "./components/Timer"; import React, { useState } from "react"; function App() { const [showTimer, setShowTimer] = useState(false); return ( // 트루 일때만 보이게 하기 {showTimer && } setShowTimer(!showTimer)}>Toogle Timer ); } export default App; src>components>Timer.js import ..

컴포넌트도 인생이 있다. 컴포넌트 인생 중간중간에 간섭해보자. 1. 생성이 될 수도 있고 ( mount) 2. 재 렌더링이 될 수도 있고 (update) 3. 삭제가 될 수도 있다.( unmount) 이렇게 우리 코드에 갈고리를 달아서 넣어주면 된다. => 페이지 장착시, 업데이트 시, 제거 시 코드 실행 가능 갈고리는 영어로 hook, 그래서 저걸 Lifecycle hook이라고 부른다. useEffect 이란? : 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook useEffect을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다. (함수의 핵심기능 외에 쓸데없는 기능들을 프로그래밍 용어로 side effect) 🌟 한마디로, 컴포넌트의 핵심 기능은 html 렌..

리액트에서의 Elements? 리액트 앱을 구성하는 가장 작은 블록 화면에 표시할 내용을 기술 자바스크립트의 객체형태로 존재 ► 더 널리 알려진 개념인 “컴포넌트”와 엘리먼트를 혼동할 수 있지만 이런 구조로 되어있다. DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가에 다음과 같은 가 있다고 생각 해보자. 루트 노드에 엘리먼트 렌더링 하기 const element = Hello, world; ReactDOM.render(element, document.getElementById('root')); 위 코드를 실행하면 화면에 “Hello, world”가 보인다! 이때 모든 엘리먼트는 React DOM이라는 곳에서 관리하고, 루트(root)DOM 노드라고 부른다. => React 엘리먼트 -> 루트 DOM 노..

먼저 이 코드를 보자 안에 글제목 state 가 필요한데? 하지만 제대로 실행되지 않는다. '글제목'이라는 변수가 define 되지 않았다고 에러뜸.. function App() { let [글제목, 제목변경] = useState(["남자코트 추천", "강남우동 맛집", "파이썬독학",]); return( (생략) ) } function Modal() { return ( {글제목[0]} 날짜 상세내용 ); } 그 이유는? 당연히 글제목이라는 state 변수는 function App()에 있지 function Modal()에 없으니까! 그럼 어떻게 하면 저 위에있는 state을 쓸 수 있을까!!? 정답: props props 란? - 프로퍼티, props(properties의 줄임말) - 상위 컴포넌트가 ..

1. html css로 미리 UI 디자인을 다 해놓고 2. UI의 현재 상태를 state로 저장해두고 3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성 # 제목을 클릭시 모달창이 스위치처럼 만들기 function App (){ let [modal, setModal] = useState(false); return ( (생략 : 모달창 ) { setModal(!modal) } }> {글제목[0]} { modal == true ? : null } ) } 👉 위에 있는 step대로 하면 된다. 1. 모달창 디자인은 했다 치고 (css파일로) 2. UI의 현재 상태를 state로 저장해두는 것. let [modal, setModal] = useState(fals..

component 란? 이렇게 복잡한 html을 한 단어로 치환할 수 있는게 컴포넌트이다. 👋 어떤걸 보통 컴포넌트로 만들까요 ? 반복적인 html 축약할때 자주변경되는 ui 들 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용 또는 다른 팀원과 협업할 때 웹페이지를 Component 단위로 나눠서 작업을 분배하기도 한다. 컴포넌트는 그냥 함수 문법이랑 똑같아서 용도도 똑같다고 보면 된다. 하지만 아무거나 컴포넌트를 만들면 안된다. 컴포넌트를 만드는 것은 항상 책임이 따른다 1. function 만들기 function 만들때 다른 function 바깥에 만들기 영어 대문자로 보통 작명 arrow function 써도 된다. function Modal(){ retur..

16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었다. 즉 State, Life Cycle 등등 이 없기 떄문에 클래스형 컴포넌트를 사용 했었다. (현재는 클래스형 컴포넌트를 거의 사용 하지 않는다고 한다) 리액트 16.8부터 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. useState Hook을 사용하여 State 사용이 가능하다!! 리액트에서의 state란? 리액트에서는 컴포넌트 상태 리액트 컴포넌트의 (변경가능한) 데이터 자바스크립트의 객체 보통 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다. 우리는 그냥 let name= 'hyebin' 이렇게 변수에 데이터를 저장했었는데 리액트에선 변수 말고 state를 만들어서 ..

결론부터 말하자면 JSX에서는 자바스크립트 조건문처럼 if나 switch문으로 처리가 불가능 그 이유는 ? 우리가 자주 쓰던 자바스크립트 조건문은 return () 안의 JSX 내에서는 사용 불가능하다. if (어쩌구) {저쩌구} 이게 안된다는 소리 🤔 그럼 뭐 써야할까? 1. 삼항 연산자 : 조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코드 function Component() { return ( { 1 === 1 ? 참이면 보여줄 HTML : null } ) } 2. &&연산자로 if문 역할 ( 단, else 없음) : "만약에 이 변수가 참이면 를 이 자리에 뱉고 참이 아니면 null 뱉고" 이런 상황에서 자주 쓸 수 있는 간단한 조건문. && 연산자로 조건식과 오른쪽 JSX 자료를..

근데,,, JSX 가 뭐져?? - JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. - JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 1. 반드시 부모 요소 하나가 감싸는 형태여야 한다. : Virtual DOM(가상돔)에서 컴포넌트 변화를 감지할 때 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다. // div를 사용해서 스타일 적용시 작성한 코드를 div로 한번 더 감쌌다는 부분을 고려해야 한다. function App() { return ( Hello world ); } 밖에 감싸주는 태그를 다른걸로 대체할 수 있다. ▶ : 보다 무거운 편이다. ▶ 🚫 에러 케이스 retu..