React - 기초

div 태그로 감싸 리액트 컴포넌트를 전달해주는게 기본적이다.하지만 박스의 역할을 하는 Sidebar, Card, Box, Dialog 등은 모두 각각의 컴포넌트 틀 및 스타일, 기능을 가지고 있다.그렇게 div의 역할을 대신해 감싸주는 wrapper의 역할을 하는 컴

JSX는 리액트에서 사용하는 UI를 정의할 때 사용하는 도구다.JSX는 HTML 문법과도 같은 형태를 가졌지만 실제로는 JavaScript로써 export되는 동작 방식을 가지고 있다.이는 브라우저에서 번들링되는 과정에서 Babel을 사용해 일반 JS 문법으로 변환해준

useState를 객체로 다루는 옳은 방법을 알아볼 것이다.useState의 두 번째 인자는 무조건 그 안의 값으로 대체한다.그 원리를 이용해 현재 첫 인자인 userInput을 가져와서 사용하게 된다.그런데 비동기 작업 등 여러가지 상태 업데이트가 계획되어있다면, 잘

리액트에서 양방향 바인딩은 어떻게 구현할까?아래와 같이 값이 입력되어 onChange속성으로 상태 값을 변경시킴과 동시에 value를 userInput의 상태로 설정해준다.그러면, input이 바뀔 때는 userInput 값이 바뀌고, 반대의 경우에도 value로 인

부모 컴포넌트는 props를 통해 데이터를 전달한다. 그렇다면 자식은 어떻게 데이터를 부모에게 전달할까?아래와 같이 하면 된다.부모 컴포넌트에서 자식 컴포넌트의 데이터를 받아올 함수를 만들어 props로 넘긴다자식 컴포넌트가 받은 함수에 데이터를 인자로 받는다.인자로

리액트에서는 동적으로 스타일 클래스를 추가하고 제거할 수 있다.아래의 코드를 보면, input태그에 값이 들어오지 않은 채로 제출을 누르면 invalid라는 css클래스가 동적으로 추가되며 빨간색으로 input과 label 태그를 바꿔준다.그리고, 입력이 들어올 때마다

1. JSX의 한계 JSX는 단 하나의 요소만 반환할 수 있다. 이 특성을 이용해 아래와 같은 방법들로 반환이 가능하다. div태그로 묶어주기 여러 복합 요소들을 리스트 형태로 넘겨주기 wrapper 컴포넌트 만들기 div 태그로 묶을 때는 아래와