jineecode

1. 설치 : npm install react-router-dom 2. src/index.js 에 import. import { BrowserRouter } from "react-router-dom"; 3. ReactDOM 에 코드 ReactDOM.render( , document.getElementById("root") ); 와 의 큰 차이점은 주소창에 # 버튼이 있냐 없냐의 차이가 있다. 주소창에 #이 있으면 서버에 요청을 할 수 없다. 즉, 안전하게 리액트 라우터를 다루고 싶을 때 HashRouter 를 쓰게 된다. 반면 백엔드와 함께 작업할 일이 있을 경우 BrowserRouter을 쓴다고 한다. 4. App.js 에 react-router-dom에 대한 컴포넌트들 import import { L..

react의 jsx에서는 if문처럼 for문 역시도 중괄호 안에 쓸 수 없다. react에서는 map()을 쓰면 된다. ES6 문법 중 map 메소드를 보자. let array = [2, 3, 4]; // array 내에 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 .map()을 쓴다. let newArray = array.map(function (a) { return a * 2 }); // 또다른 array가 생성된다. [4, 6, 8] // a 라는 파라미터: array 안의 하나하나의 데이터, map~는 a에서 꺼내 하나하나 반복문이 돈다. 이를 이용하여 유사반복문을 만들어보자 let [title, changeTitle] = useState([ "오늘 한 일", "내일 할 일", "모레 할 일",..

평소 HTML을 작성할 때 emmet을 애용하는지라, react에서 emmet이 되지 않는 것이 불편하여 방법을 찾아보았다. 1. 파일 > 기본 설정 > 설정 Window 이용자 : Ctrl + , Mac 이용자 : Command + , 2. Include Languages 검색 3. setting.json 편집 클릭 4. 아래 내용을 넣어준다. { "emmet.includeLanguages": { "javascript": "javascriptreact" } } 출처: medium.com/@eshwaren/enable-emmet-support-for-jsx-in-visual-studio-code-react-f1f5dfe8809c Enable Emmet support for JSX in Visual Stu..

ValidationSample.css .success { background-color: lightgreen; } .failure { background-color: lightcoral; } class가 success 면 lightgreen이, failure면 lightcoral이 되는 css를 먼저 코드한다. ValidationSample.js import React, { Component } from "react"; import "./ValidationSample.css"; class ValidationSample extends Component { state = { password: "", clicked: false, vaildated: false, }; handleChange = (e) => { ..

EventPractice.js import React, { Component } from "react"; class EventPractice extends Component { render() { return ( 이벤트 연습 { console.log(e); }} > ); } } export default EventPractice; console.log >> onChange event input에 입력 시, SyntheticBaseEvent 가 나타난다. import React, { Component } from "react"; class EventPractice extends Component { render() { return ( 이벤트 연습 { console.log(e.target); }} > ); ..

src/Counter.js import React, { Component } from "react"; class Counter extends Component { constructor(props) { super(props); this.state = { //state의 초깃값 설정하기 number: 0; } } render() { const { number } = this.state; return ( {number} { this.setState({ number: number + 1 }); }} > +1 ); } } export default Counter; class Counter extends Component { constructor(props) { super(props); this.state = { ..

1. props 기본값 설정 App.js import React, { Component } from "react"; import "./App.css"; import MyComponent from "./MyComponent"; const App = () => { return ( ); }; export default App; App은 부모 컴포넌트, 는 자식 컴포넌트라고 한다. App이 갖고 있는 state 데이터를 자식 컴포넌트에게 props를 이용해 전송해줄 수 있다. 그래야만 자식 컴포넌트가 부모 컴포넌트가 가진 state를 쓸 수 있다. props를 쓰는 방법은 아래와 같다. 1. 부모 안에 있는 자식 컴포넌트 태그에 속성을 만들어준다. 2. 바깥에 있는 자식컴포넌트에 props 파라미터 사용 fun..

1. Q. 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 감싸 주어야 할까요? A. Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문 div로 꼭 감싸고 싶지 않을 때는 리액트v16 이상부터 도입된 혹은 으로 감싸면 된다. 2. JSX 내부의 자바스크립트 표현식에서는 if 문을 사용할 수 없다. JSX 밖에서 if문을 사용하거나 {} 안에 삼항연산자를 사용하면 된다. 혹은 &&연산자를 사용한다. (false를 렌더링 할 때는 아무것도 나타나지 않기 때문) 3. Q. 클래스형 컴포넌트와 함수형의 컴포넌트의 차이 A. 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 ..