React

Delete기능 구현하기Create나 Update는 특정 페이지로 이동하기 때문에 a태그를 사용Delete는 링크 이동이 아니라 button을 사용{contextControl}이라는 변수는 mode가 'READ'일 때 보여지는 UI기존의 li태그가 있고 또 하나의 li

Update 구현하기

Create버튼을 클릭하면 mode가 create로 바뀌고 해당하는 UI가 표시되도록..!a태그를 추가하고 onClick의 함수를 적용한다이 때, a태그의 기본 동작을 못하게 하기 위해 event.preventDefault();모드값을 바꾼다. setMode('CREA

Prop과 함께 컴포넌트 함수를 다시 실행해서 새로운 return값을 만들어주는 하나의 데이터Prop과 State 모두 값이 변경되면 새로운 return값을 만들어 UI를 바꾼다.Prop은 컴포넌트를 사용하는 외부자를 위한 데이터State는 컴포넌트를 만드는 내부자를

onChangeMode 함수 전달하기Header 컴포넌트 안에서 링크를 클릭하면 컴포넌트가 함수를 호출해서 Header를 클릭했을 때 해야하는 작업들이 실행되게끔ex) alert('Header);a태그 안에 onClick의 함수 이벤트를 걸어준다.(리액트 개발환경이 브

props(property)란 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성이다.상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 때문에 단방향 데이터 흐름을 갖느다.부모 컴포넌트는 수정 가능하지만, 자식 컴포넌트는 읽기만 가능하다.Header에 title

React에서 사용자 정의 태그를 만들 때 반드시 대문자를 사용한다.header의 태그는 html의 태그이며 이 태그를 함수 function Header()와 같이 정의한다.React에서는 사용자정의라는 표현이아닌 컴포넌트라고 정의한다위와 같이 간결한 코드로 완성할 수

index.js의 의 코드는 상단의 import App from './App';을 의미한다.import App from './App';의 App은 App.js오른쪽에 보이는 웹페이지의 디자인은 App.css, index.css를 통한 수정이 가능하다. App()의 함수