본문 바로가기

리액트

Short Circuit Evaluation (단락회로 평가) - 한입 크기로 잘라 먹는 리액트 (303) 단락회로 평가 (Short Circuit Evaluation; SCE)- 피연산자 중 뒤에 위치한 피연산자를 확인할 필요 없이 연산을 끝내는 것 - 왼쪽에서 오른쪽으로 연산하는 논리 연산자의 연산 순서를 이용하는 문법 예제 1console.log(true && true); // 단락회로 평가 X console.log(false && true); // 단락회로 평가 O console.log(false || false); // 단락회로 평가 X console.log(true || false); // 단락회로 평가 O console.log(!true); 예제 2const getName = (person) => { // 단락회로 평가 미사용 // if (!person) { // return '객체가 아닙니다.'.. 더보기
JavaScript Ternary Operator (삼항연산자) - 한입 크기로 잘라 먹는 리액트 (302) 삼항연산자 (Ternary Operator) - JS에서 3개의 피연산자를 받는 유일한 연산자 - 조건문 ? 조건문인 참(true)일 경우 실행할 표현식 : 조건문이 거짓(falsy)일 경우 실행할 표현식 - if...else 문의 대체재 예제 1 let arr = []; let a; // undefined const arrStatus = arr.length === 0 ? '빈 배열' : '안 빈 배열'; console.log(arrStatus); // 빈 배열 const aResult = a ? true : false; console.log(aResult); // false (falsy) const arrResult = arr ? true : false; console.log(arrResult); //.. 더보기
JavaScript Truthy & Falsy - 한입 크기로 잘라 먹는 리액트 (301) Truthy - JS에서 true가 아니어도 true로 취급되는 값 e.g., [], {}, Infinity, ' ', " " 등을 포함하여 Falsy를 제외한 모든 값 Falsy - JS에서 false가 아니어도 false로 취급되는 값 e.g., null, undefined, 0, -0, NaN, '', "" if (0) { console.log('TRUE'); } else { console.log('FALSE'); } const getName = (person) => { if (!person) { // NOT false = true return '객체가 아닙니다.'; } return person.name; }; let person = { name: '최현지' }; const name = getNam.. 더보기
JavaScript Array Method - 한입 크기로 잘라 먹는 리액트 (212) JS 배열 함수 1. forEach 배열의 요소에 순차적으로 접근 2. map, return 배열의 각 요소에 대해 콜백 함수 실행, 콜백 함수에서 return 사용 가능, 리턴한 값을 요소로 생성된 새로운 배열을 리턴 3. includes === 연산을 통해 배열에 특정 값이 있는지 확인하여 boolean 타입 리턴 4. indexOf 배열에 특정 값이 있으면 인덱스 리턴, 없으면 -1 리턴 5. findIndex 특정 속성을 갖는 요소의 인덱스 리턴, 중복된 값이 있으면 가장 앞에 있는 요소의 인덱스 리턴 6. find 특정 속성을 갖는 요소 자체를 리턴 7. filter 배열에서 특정한 조건을 만족하는, 즉 콜백 함수가 true를 리턴하는 모든 요소를 배열로 리턴 8. slice(start, end.. 더보기
React 기초 - 생활코딩 리액트 2022 개정판 React.js 자바스크립트 라이브러리, node.js 환경에서 동작 index.js 입구, 즉 제일 먼저 동작 npx create-react-app . 현재 디렉토리에 리액트 프로젝트 생성 npm [run] start 개발을 위한 명령어, 개발 환경 구축 npm [run] build 빌드를 위한 명령어, 배포본 생성 npx serve -s build build 폴더의 index.html을 서비스하는 웹 서버 실행 -> 접속 가능한 주소 선택하여 클릭 => 개발 버전 X, 실제 서비스 버전 O React란? 개념 비고 React 사용자 정의 태그를 만드는 기술 리액트의 본질 Componenet 사용자 정의 태그 네이밍 룰: 대문자로 시작 Prop 컴포넌트의 속성 cf. HTML 태그 속성 React 효과.. 더보기

티스토리툴바