React

조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 바깥에서 if문을 사용하거나, 조건부 연산자를 사용한다. example

조건부 연산자를 사용한 구현 && 연산자를 사용한 구현

properties를 줄인 표현으로 컴포넌트의 속성을 설정할 때 사용하는 요소. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.arrayOf(다른 PropType) : 특정 PropType으로 이루어진 배열 (ex arrayOf(Pr

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.클래스형 컴포넌트에서 사용 : state함수형 컴포넌트에서 사용 : useState참고 : 리액트를 다루는 기술

배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해주는 문법 해당 컴포넌트를 App.js에서 불러오는 부분은 앞의 포스트에서와 다른 부분이 없으니 앞으로의 포스트에서는 특별히 다른점이 없다면 생략한다.useState는 한 컴포넌트에서 여러 번 사용해도 상관없다.

이벤트 이름은 카멜 표기법으로 작성한다.ex) html의 onclick은 react에서는 onClick이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라 함수 형태의 값을 전달한다. DOM 요소에만 이벤트를 설정할 수 있다.우리가 직접 만든 컴포넌트에는 이벤트를

함수가 호출될 때 this는 호출부에 따라 결정되므로, 클래스의 임의 메서드가 특정 html 요소의 이벤트로 등록되는 과정에서 메서드와 this의 관계가 끊어진다. 임의의 메서드가 이벤트로 등록되어도 this를 컴포넌트 자신으로 제대로 가리키기 위해서는 메서드를 thi