jineecode

&& 연산자 좌 우 모두 true 면 true true && false; true && true; 자료형에서의 결과 true && '안녕'; false && '안녕'; 이를 이용해서 간단한 삼항연산자를 대신할 수 있다. function Component() { return ( { 1 === 1 ? 참이면 보여줄 HTML : null } ) } //위와 아래는 같은 기능을 한다. function Component() { return ( { 1 === 1 && 참이면 보여줄 HTML } ) } 왼쪽 조건식이 true면 오른쪽 JSX가 그 자리에 남으며 왼쪽 조건식이 false면 false가 남는다. (false가 남으면 HTML로 렌더링하지 않음)

react 작업 시, Warning으로 따라다니는 경고 메시지. a태그에 target=_blank 속성만 넣으면 나타나는 메시지로 보안 이슈로 알려져 있다. 원인: Tabnabbing 피싱 공격에 노출될 수 있기 때문. Tabnabbing 피싱 공격이란 target_blank인 태그를 클릭하였을 때 새롭게 열린 탭에서 기존 페이지를 피싱페이지로 바꿔 정보를 탈취하는 피싱공격입니다. 해결방법: rel=”noopener noreferrer” 속성을 추가하여 문제를 해결. rel=”noopener noreferrer”는 rel=noopener 속성이 부여된 링크를 통해 열린 페이지는 opener의 location변경과 같은 자바스크립트 요청을 거부함. 디버깅 완료

useEffect는 componentDidMount() , componentWillUnmount() 같은 컴포넌트 생명주기 훅이다. 사용법은 useEFfect 훅을 import를 해온 후, function 내부의 return 바로 전에 적어준다. 가급적이면 변수 이후에 적어주는 것이 좋다. (스코프로 인해 읽어오지 못할 수가 있음) import React, {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ }, []); return ( ) } useEffect 콜백함수 안에는 Detail 컴포넌트가 첫 등장하고나서 실행하고싶은 코드가 있으면 적어주면 된다. 콜백함수 이후에 등장하는 대괄호 안에는 조건문이 들어간다. 대괄호에는 s..

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([ "오늘 한 일", "내일 할 일", "모레 할 일",..

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort Array.prototype.sort() - JavaScript | MDN Array.prototype.sort() sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅 developer.mozilla.org sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다. 정렬 속도와 복잡도는 각 구..

평소 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) => { ..