전체 글

React props로 데이터 전달하기

1. 부모 컴포넌트 부모컴포넌트에 props="value" 를 입력한다. (아래에 TodoList를 보면 todo="TODO" 라고 쓰여진 부분) function App() { return ( TODO LIST ); } 2. 자식 컴포넌트 props를 파라미터로 넘겨주고, {props.XXX}로 바인딩 해서 사용한다. XXX 부분에는 부모컴포넌트에서 옮겨준 이름을 사용하면 된다. {props.todo} 부분! import React from "react"; const TodoList = (props) => { return ( {props.todo} ); }; export default TodoList;

React 컴포넌트 호출 오류 : [ ... is using incorrect casing. ]

처음 컴포넌트에 대해 공부하고 있는데, 이런 오류가 났다. Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. at todoList at div at App 뭔가 싶어 해석해보면 리액트 컴포넌트는 PascalCase 를, HTML 엘레먼트는 lowercase(소문자)를 사용하라는 것이다! 그럼 PascalCase는 뭘까? 파스칼 표기법 "PascalCase" 첫 단어를 대문자로 시작하는 표기법 예시: BackgroundColor, TypeName, PowerPoint CamleCase와 비슷하지만 첫단어도 대문자라는 차이점이 있다. 오류 메시지에서 나왔듯, 내가 만든 컴..

React : 클래스형(class) 컴포넌트, 함수형(function) 컴포넌트

각 컴포넌트를 만드는 법 1. 클래스형(class) 컴포넌트 class App extends Component { render(){ const name ='react'; return {name} 연습 } } class를 이용해서 만듭니다. 2. 함수형(function) 컴포넌트 function App() { const name = "react"; return {name} 연습; } function을 이용해서 만듭니다.