sodol-dotcom

기본값을 설정하는 이유와 방법을 이해하기 위한 글로, 기본값을 설정해주면 컴포넌트를 더 안전하게 사용할 수 있고 에러를 예방할 수 있다고 한다.  1. 기본개념: `props`란 무엇인가?React에서 `props`는 컴포넌트에 데이터를 전달할 때 사용하는 객체이다. 컴포넌트는 부모 컴포넌트로부터 `props`를 받아 자식 컴포넌트가 그 데이터를 화면에 표시하거나 동작을 처리하게 된다. 예를 들어, `Button` 컴포넌트(자식 컴포넌트)에 `color`라는 `props`가 전달되면 그 값을 이용해서 버튼의 색상을 정할 수 있다. 위 코드를 보면, `color="blue"`로 버튼의 색상이 설정된다.  2. `props`에 기본값을 설정해야 하는 이유만약 `Button` 컴포넌트에 `color`를 전달하..

1. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법: `props`부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하려면, `props`라는 특별한 방법을 사용한다.`props`는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 필요한 속성이다. 예를 들어, 자식 컴포넌트에 이름이나 나이 같은 정보를 전달하고 싶을 때, `props`로 보낼 수 있다.React에서 자식 컴포넌트가 props를 매개변수로 받는 이유https://sodol-dotcom.tistory.com/78  2. `props`가 객체로 전달되는 이유부모 컴포넌트에서 여러 데이터를 전달하려면 `props`를 객체 형태로 묶어서 보낸다. 이 객체 안에는 전달하려는 데이터가 프로퍼티로 저장되어 있다.예를 들어, `name`과..

React에서는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 `props`로 전달하도록 설계되어 있다. 이때 자식 컴포넌트가 이 데이터를 받을 수 있도록 `props`라는 객체가 자동으로 생성되어 자식 컴포넌트의 매개변수로 넘어오게 되는 것이라고 한다. 즉, 자식 컴포넌트에서 `props`를 함수의 매개변수로 설정하는 이유는 React가 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 이 데이터를 자동으로 `props`라는 객체에 담아 전달하기 때문이다.이때 `props`는 객체 형태이며, 전달한 데이터가 `props` 객체의 프로퍼티로 들어간다.  1. 매개변수로 `props`를 사용하는 방식function ChildComponent(props) { console.log(props); ..

React JSX에서 UI 구성할 때, 객체 전달 시 중괄호를 겹쳐서 두 번 사용하게 된다.  1. 첫 번째 중괄호 `{}`JSX에서 React 요소의 속성을 설정할 때, JavaScript 표현식을 사용하기 위한 중괄호이다.return {...}; // 첫 번째 중괄호  2. 두 번째 중괄호 `{}`첫 번째 중괄호 안에 JavaScript 객체를 정의할 때 두 번째 중괄호를 사용한다. 이 경우, 실제 객체의 속성-값 쌍을 정의하는 역할을 한다.즉, 중괄호가 겹쳐서 `{{}}` 형태로 사용하게 된다.const Main = () => { const user = { 이름: "이정환", isLogin: false, }; const userDetails = { age: 25, cit..

자바스크립트는 웹 페이지를 동적으로 만들 때 매우 중요한 역할을 하지만, HTML 태그 자체를 자바스크립트 코드로 직접 리턴할 수 없다. 그래서 JSX라는 특별한 문법을 사용하는데, 이것이 리액트에서 자바스크립트로 HTML과 비슷한 구문을 작성할 수 있게 도와준다.자바스크립트가 HTML 태그를 직접 리턴할 수 없는 이유https://sodol-dotcom.tistory.com/75  1. 기본 개념 이해:자바스크립트는 프로그래밍 언어로, 웹 페이지에서 여러 작업을 처리하고 데이터를 다루는 데 주로 사용된다. 자바스크립트로 HTML 태그를 만들려면 주로 `document.createElement` 같은 메서드를 사용해야 한다. 하지만 이 방식은 복잡하고 코드가 길어질 수 있다.HTML은 웹 페이지를 구조화..

TypeScript는 기본적으로 파일을 글로벌 스코프(전역 공간)로 인식한다. 그래서 변수나 함수가 다른 파일에서 중복으로 사용될 경우 충돌할 수 있다. 해결 방안으로 아래 두가지 방법이 있다.  1. 각 파일에 `export {};`추가하기이 방법은 각 TypeScript 파일의 맨 아래에 `export {};`라는 코드를 추가하는 것이다.이 코드를 넣으면 TypeScript가 해당 파일을 모듈로 인식한다.하지만 모든 파일에 이 작업을 일일이 추가해야 하므로, 관리가 번거롭다.  2. `tsconfig.json`에서 `"moduleDetection": "force"` 설정하기`tsconfig.json` 파일은 TypeScript의 설정을 관리하는 곳이다. 여기서 `"moduleDetection": "f..

0. 들어가기 전에TypeScript로 프로그래밍하기 위해 필요한 개발 환경 설정부터 패키지 설치, 코드 작성, 컴파일 및 실행까지의 과정을 단계별로 설명TypeScript는 자바스크립트의 슈퍼셋 언어로, 타입을 명시해 오류를 사전에 방지할 수 있는 장점이 있다.  1. 실습용 폴더 만들기먼저 프로젝트 코드를 보관할 폴더를 만든다.`onebite-typescript`라는 폴더를 만들고, 그 안에 `section1`이라는 하위 폴더 생성한다.폴더 이름은 자유롭게 정해도 되고, 포인트는 프로젝트별로 폴더를 나누어 관리하는 것.  2. Node.js 패키지 초기화하기Visual Studio Code를 열어서 위에서 만든 폴더를 열어준다.터미널을 열고 아래 명령어를 입력해 Node.js 패키지를 초기화 한다.여..

// About.jsfunction About() { return ( 공통 헤더 네비게이션 바 소개 페이지 내용 공통 푸터 );}1. Outlet 이란?`Outlet` 은 주로 React 라우팅 라이브러리인 `react-router-dom` 에서 사용하는 특수한 컴포넌트이다.이 컴포넌트는 여러 페이지를 구성할 때, 부모-자식 관계를 통해 페이지의 일부를 동적으로 바꾸고 싶을 때 사용된다.쉽게 말해, 특정 위치에 다른 컴포넌트를 삽입할 수 있는 “구멍”이나 “창구”라고 생각할 수 있다.  2. 왜 Outlet 이 필요한 이유?웹사이트를 만들 때, 여러 페이지가 있지만 그 페이지들 사이에 공통적으로 유지되어야 하는 부분이 있을 수 있다.예를 들어, 모든 페이지에 동일한 헤더와 푸터가 있고, 중간의..