React

React를 다운받고 기본 환경설정부터 샘플웹앱 배포 방법까지 React 기본 중의 기본편!

6. Component와 Props 6-1. 기본 Component 생성 App.js파일 안에 class 이름과 함께 Component 정의 render() {} 함수 필수로 생성 return 작성 6-2. Component의 특징 App.js에서 Compo

이벤트를 설치하기 전에 이벤트를 설치할 컴포넌트를 수정해준다.render()state의 값이나 props의 값이 바뀌면 해당 컴포넌트의 render() 함수가 호출된다. = 화면이 다시 그려진다!여기에서는 state의 mode 값에 따라 화면을 달라지게 할 수 있다.J

props읽기 전용(read-only)컴포넌트 외부에서 컴포넌트의 속성을 조작할 수 있는 정보state컴포넌트 내부에서 사용되는 정보값을 바꿀 수 있다상위 컴포넌트에서 하위 컴포넌트의 속성을 조작할 때props로 속성값을 전달하여 조작 가능하위 컴포넌트에서 상위 컴포넌

CRUD 중 C, U, D 구현create, update, delete라는 이름의 리스트를 만들어서 클릭하면 App.js의 state의 mode값을 변경하여 각 기능을 실행할 수 있도록 구현한다. 컴포넌트 하나를 새로 생성하여 이벤트 동작을 통해 mode를 변경할 수

CreateContent 컴포넌트 내용을 복사해서 UpdateContent 컴포넌트 파일 생성App.js에서 render()함수 내용이 길어져서 보기 힘들어졌으므로 컨텐츠의 id값을 통제하는 부분과 컨텐츠 내용을 가져오는 부분을 생성자(constructor()) 함수

App.js에 있는 Control컴포넌트 부분에서 delete기능을 수행하도록 구현할 수 있다.delete모드일 때와 아닐 때 구분 짓는 코드로 수정하기delete모드에서 confirm창을 띄우고 사용자가 확인을 누르면 삭제하고, 취소를 누르면 삭제하지 않도록 하는 코

React의 불변성배열과 객체는 불변성을 가진다.프로젝트가 고도화되고 복잡해질수록 원본 배열이나 객체, 값을 쉽게 수정할 수 있으면 심각한 이슈가 발생할 수도 있다.쉽게 원본 데이터를 변경하지 않고 원본 데이터를 복제해서 사용하도록 하여 심각한 이슈 발생을 사전에 방지

class 컴포넌트React.Component와 React.PureComponent를 기반으로 만든 컴포넌트를 말한다.Life-cycle method를 사용하여 state값이 바뀌면 렌더링을 다시 한다.클래스 스타일로 만드는 컴포넌트는 함수 스타일 컴포넌트보다 여러가지

클래스 컴포넌트에서는 props를 state로 받아와서 setState() 메소드를 이용하여 state값을 변경할 수 있다.state값이 변경될 때마다 클래스 컴포넌트 내부의 render()함수가 호출되어 매번 리렌더링된다.함수형 컴포넌트에서 props를 state로

클래스형 컴포넌트의 라이프 사이클(기본)componentWillMountrendercomponentDidMount클래스형 컴포넌트의 라이프 사이클(확장)componentWillMountrendercomponentDidMount❗ 화면에 출력할 값이 변경되는 이벤트 동작

함수형 컴포넌트에서 클래스형 컴포넌트의 componentDidMount, comeponentDidUpdate와 같은 역할. 사용하려면 import를 해야 한다.useEffect의 effect는 side effect라는 뜻이다.Main effect는 return() 안에