state

State - 현재 가지고 있는 형태나 모양을 정의- 컴포넌트의 상태를 의미- 변화할 수 있는 동적인 값- 상태변화를 감지해 자동으로 리렌더링을 함- 하나의 컴포넌트에 여러개의 state를 생성할 수 있음   - 두 가지 요소가 전달되는 것을 확인할 수 있음   - 첫번째 요소 : 새롭게 생성된 state의 값(초기값). 인수로 전달받음- 두번째 요소 : 상태 변화 함수(state를 변경시키는 함수)    - 그렇기 때문에 대부분의 경우 구조분해할당으로 받음   state 변경   - setState를 활용함   Count로 수 늘려보기 - +버튼을 클릭할 때마다 변경 사항을 감지해 리렌더링해줌   전구 키고 끄기  - 삼항 연산자를 사용하여 보기 좋게 만들 수 있음  import './App.css'i..

state컴포넌트 내부에서 바뀔 수 있는 값 클래스형 컴포넌트의 state  컴포넌트에 state 설정하기 :  constructor 메서드 사용class Counter extends Component { constructor(props) { super(props); //state의 초기값 설정하기 this.state = { number: 0, }; }반드시 super(props)를 함께 호출해야 한다this.state 를 사용해 초기값을 설정한다 render render() { const { number } = this.state; //state를 조회할 때는 this.state로 조회 return ( {number} ..

코딩애플님의 2022 리액트 강의 2~6강을 참고해서 React로 간단한 홈페이지 만들기를 해보았다! 무료강의가 6강까지만 있어서 완성도 있는 홈페이지는 안나왔지만,React 입문 느낌으로 해보기 좋았다 이 글 이후부터는 "리액트를 다루는 기술" 책을 바탕으로 공부할 계획이다!  JSX 문법기본 셋팅App.js에서 div 하나만 남기고 지우기 JSX 문법class 넣을 땐 className으로 해야함class 선언과 혼동될 수 있기 때문변수 넣을 땐 {중괄호} : 데이터 바인딩태그 사이 뿐만 아니라 태그 안에도 사용 가능(ex)style 넣을 땐 style={{스타일명:'값'}}카멜케이스로 작성(font-size(X), fontSize(O)) 참고error message는 팝업으로 뜨기도 하고, cons..