기초 메모지

속성(Propertys == Props) 속성(Props)은 하위 컴포넌트(Component)에 전달된 값을 그대로 표현할 때 사용합니다. 같은 컴포넌트지만 내용이 다른 양식(Template)을 만들 때 사용합니다. 속성 값이 달라져도 컴포넌트를 수정할 필요가 없습니다. 속성은 읽기 전용(Read Only)으로 속성 값이 변하지 않습니다. function App() { return ( ); } 알맞은 DOM 태그에 중괄호(JSX 또는 TSX 문법)를 넣어 지정 된 속성 값을 표시합니다. function Profile(Props) { return ( {Props.Name} {Props.Email} {Props.PhoneName} ); } 상태(State) 상태(State)는 컴포넌트에서 관리되고 상태가 변..

리액트(React)에서 리덕스(Redux)를 사용하는 이유 State(상태)를 편리하게 관리 이용하기 위해서 입니다. 리액트(React)는 가상 돔(Virtual DOM)을 이용하므로 컴포넌트(Component == Function)들이 계층(Tree)으로 존재합니다. 속성(Props)는 일방적으로 상위 컴포넌트에서 하위 컴포넌트로 값을 전달합니다. 계층(Tree) 구조인 DOM 특성 상 최상위 노드에서 최하위 노드까지 접근하려면 경로상 모든 노드를 방문해야 합니다. index에서 Props로 TodoList 컴포넌트로 데이터를 전달하려면 index > App > Body > TodoList 순으로 접근해야합니다. 앞서 말씀 드렸지만 계층 구조이므로 index에서 TodoList로 바로 전달할 수는 없습..

자바스크립트 프로젝트 명령어 npx create-react-app [프로젝트_이름] 타입스크립트 프로젝트 명령어 npx create-react-app [프로젝트_이름] --template typescript ※ 프로젝트 이름 규칙 : 대문자, 공백 제외 'create-react-app' 패키지가 업데이트 되면 다음과 같은 메시지가 표시되면서 명령어가 듣지 않습니다. 프로젝트 생성할때 마다 'create-react-app' 패키지를 최신버전으로 설치하면 됩니다. npx create-react-app@latest [프로젝트_이름] [--template typescript]