보호되어 있는 글입니다.

구조분해할당(Destructuring Assignment)배열이나 객체의 값을 쉽게 꺼내서 변수에 할당할 수 있게 해주는 ES6 문법이다. 1. 배열 구조분해할당1-1. 기본예제const arr = [1,2,3];const [a,b,c] = arr;console.log(a); // 1console.log(b); // 2console.log(c); // 3배열의 각 요소가 순서대로 변수에 할당된다.1-2. 일부 값만 꺼내기, 건너뛰기const arr = [10,20,30,40];const [fist, , third] = arr;console.log(first); // 10console.log(third); // 30두 번째 값을 건너뛰고 세 번째 값을 바로 할당할 수 있다.1-3. 나머지(REST) 연산자..

더보기1. 컴포넌트마크업, CSS, JS를 앱의 재사용 가능한 UI 요소1-1. 컴포넌트 내보내기`export default` 는 표준 JavaScript 구문으로 나중에 다른 파일에서 가져오는 기능이다.1-2. 함수 정의하기`function Profile() {}`을 사용하면 `Profile`이라는 자바스크립트 함수를 정의.React 컴포넌트는 일반 JS 함수이지만, 이름은 대문자로 시작해야 하며 그렇지 않으면 작동하지 않는다. 1-3. 마크업 추가하기이 컴포넌트는 `src` 및 `alt` 속성을 가진 ``태그를 반환한다. HTML처럼 작성되있지만 실제로는 자바스크립트이며,이 구문을 JSX라고 한다.return ;// 마크업이 모두 return키워드와 같은 라인에 있지 않은 경우 괄호로 묶는다.retu..

리액트 기본 문서에서 보충 설명이 필요해 재정리를 통해 기본 개념을 다잡고자 한다.https://ko.react.dev/learn/passing-props-to-a-component1. props란props는 "properties"의 줄임말로 부모 컴포넌트가 자식 컴포넌트에게 값을 전달하는 방법이다.자식 컴포넌트는 props를 통해 전달받은 값을 읽는다.props는 읽기 전용이다. 자식 컴포넌트는 props 값을 직접 수정할 수 없다.2. 코드에서의 props 흐름2-1. 부모 컴포넌트 : Profile// App.jsexport default function Profile() { return ( .. );}Profile 컴포넌트가 Avatar 컴포넌트를 여러번 사용하면서, 각..

표현식 , 문, 표현식문 이란 단어는 공부하면서 계속 나오던데 개념이 확실치 않아 다시 정리해보았다.1. 표현식(Expression)정의 : 실행 결과가 항상 값이 되는 코드표현식은 값처럼 사용할 수 있다.var x; // 변수 선언문x = 5; // 할당문function foo() {} // 함수 선언문if (x > 1) {} // 조건문for(let i = 0; i 2. 문(Statement)정의 : 프로그램을 구성하는 기본 실행 단위.명령 또는 문장에 해당하며, 프로그램의 흐름을 제어한다.프로그램의 동작을 지시문은 하나 이상의 표현식으로 구성될 수 있다.문 끝에는 보통 세미클론(;) 을 붙인다.10; // 숫자 리터럴 표현식'hello' // 문자 리터럴 표현식x // 식별자 표현식2 + 3 //..

return 안에 하나의 JSX 요소만 있다면 감쌀 필요가 없다.하지만 여러 개의 JSX 요소가 있다면 반드시 하나로 감싸야 한다. react 공식 문서에서JSX는 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환됩니다. 하나의 배열로 감싸지 않은 하나의 함수에서는 두 개의 객체를 반환할 수 없습니다. 따라서 또 다른 태그나 Fragment로 감싸지 않으면 두 개의 JSX 태그를 반환할 수 없습니다. 라는 내용이 정확히 이해가 되지 않았다. 1. JSX가 자바스크립트 객체로 변환된다.JSX는 실제로 브라우저가 이해할 수 있는 HTML 이 아니라, 자바스크립트 코드로 변환된다.// JSXconst element = Hello;// JS 이 코드는 내부적으로 하단 코드처럼 변환된다.c..

1. Default Export (기본 내보내기)한 파일(모듈)에서 단 하나만 내보낼 수 있음가져올 때(import) 이름을 마음대로 정할 수 있음중괄호 없이 import// Gallery.jsexport default function Gallery() {..};// App.jsimport MyGallery from './Gallery.js';export default function App() { return ( );}주로 "이 파일의 대표 기능" 을 내보낼 때 사용 2. Named Export (이름 내보내기)한 파일에서 여러 개 내보낼 수 있음내보낼 때와 가져올 때 이름이 일치해야 함(필요하면 as 별칭 가능)중괄호를 사용해서 import// Gallery.jsexport functi..

1. 문제마크업을 짤 때 개발자에게 넘겨주기 위해 임시로 인라인에 display:none; 처리한 경우가 있었다.block3이 백그라운드가 적용될 줄 알았는데 되지 않았다.block1block2block3.block1 + .block3 {background-color:red;} 2. 이유인접 형제 선택자는 "HTML 구조상 바로 다음 형제" 만 선택하기 때문.즉, 요소가 화면에 보이느냐 (display:none 이냐) 는 전혀 상관없고, HTML 구조상 바로 다음에 오는 형제만 인식 한다.display:none은 보이지 않게만 할 뿐, DOM 구조에서 사라지는 것이 아니기 때문이다.