sodol-dotcom

1. 오류 메시지hook.js:608 Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`. Error Component Stack at input () at section () at div () at Editor (Editor.jsx:46:29) at div () at New (New.jsx:7:15) at RenderedRoute (..

1. 기본 사용법toLocaleDateString()는 자바스크립트에서 날짜를 사용자가 설정한 언어와 지역에 맞춰서 사람이 읽기 쉬운 형식으로 변환해주는 함수이다. 간단히 말해, 날짜를 각 나라별로 익숙하게 볼 수 있는 형태로 보여주는 데 유용하다. toLocaleDateString()는 Date 객체에서 사용할 수 있다. 예를 들어, 현재 날짜를 한국 형식으로 출력하려면 다음과 같이 할 수 있다.const today = new Date();console.log(today.toLocaleDateString());위 코드를 실행하면 보통 한국에서는 YYYY.MM.DD 형식으로 날짜가 출력된다. 예를 들어, 2023.10.25 와 같은 형태가 될 것이다. (한국 지역이 기본 설정된 브라우저에서 실행시)2. ..

기본값을 설정하는 이유와 방법을 이해하기 위한 글로, 기본값을 설정해주면 컴포넌트를 더 안전하게 사용할 수 있고 에러를 예방할 수 있다고 한다.  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..