리액트 19버전 무료 강의(6. JSX 보충 + setState에 객체를 넣을 때 주의할 점)

1. 리액트에서 로그인 폼 만들기

로그인 폼을 만들 때, 우선 사용자가 아이디와 비밀번호를 입력하도록 하는 입력 필드가 필요해요. 이러한 필드에는 에러 메시지를 표시할 수 있는 공간도 마련해야 하죠. 예를 들어, 사용자가 아이디나 비밀번호를 입력하지 않았을 때 경고창을 띄우는 기능을 구현할 수 있어요.

리액트에서는 상태를 관리하기 위해 setState를 사용해요. 사용자가 로그인 버튼을 클릭했을 때, 입력값을 체크하고 에러 메시지를 스테이트에 저장하는 방법이죠. 이때 객체 형태로 에러 메시지를 관리하면, 여러 개의 에러를 동시에 처리할 수 있어요. 예를 들어, 아래와 같이 객체를 정의할 수 있어요:

javascript const [errors, setErrors] = useState({ username: '', password: '', });

이런 방식으로 객체를 사용하면 각 필드에 대한 에러 메시지를 개별적으로 관리할 수 있어요. 사용자가 로그인 버튼을 클릭했을 때, 입력값이 비어있으면 해당 필드에 에러 메시지를 추가하도록 구현하면 되죠.

2. setState에 객체를 넣을 때 주의사항

리액트에서 setState를 사용할 때 주의해야 할 점이 있어요. 객체 형태로 상태를 업데이트할 때는 이전 상태와 다음 상태가 달라야 해요. 만약 같은 객체를 재사용하면 리액트가 상태 변화로 인식하지 못해요. 예를 들어, 아래와 같은 코드는 문제가 생길 수 있어요:

javascript setErrors({ ...errors, username: '아이디를 입력해주세요', });

이 경우, errors 객체를 그대로 사용하게 되면 리액트는 상태 변화가 없다고 판단할 수 있어요. 따라서 항상 새로운 객체를 생성하여 상태를 업데이트해야 해요. 아래와 같이 작성하면 올바르게 작동해요:

javascript setErrors(prevErrors => ({ ...prevErrors, username: '아이디를 입력해주세요', }));

이렇게 하면 이전 상태를 기반으로 새로운 상태를 만들 수 있어요. 이러한 패턴은 리액트에서 상태 관리를 할 때 매우 중요한 개념이에요.

3. CSS 및 JSX 스타일 적용하기

리액트에서 CSS를 적용할 때는 JSX 문법을 사용해야 해요. 예를 들어, 스타일을 객체 형태로 지정할 수 있어요. 이때 주의할 점은 CSS 속성명이 캐멀 케이스(camelCase)로 작성되어야 한다는 거예요. 아래와 같이 작성할 수 있어요:

javascript const style = { textAlign: 'left', color: 'red', };

이렇게 작성한 스타일을 JSX 요소에 적용할 때는 style 속성에 객체를 그대로 넣어주면 돼요. 예를 들어, 다음과 같이 사용할 수 있어요:

```javascript

```

또한, JSX에서는 class 대신 className을 사용해야 해요. 이는 자바스크립트의 예약어와 충돌을 피하기 위해서죠. 이러한 작은 차이들이 리액트를 사용할 때 종종 헷갈리기 마련이니, 항상 주의해야 해요.

리액트에서 CSS를 적용할 때는 개발자가 원하는 스타일을 효과적으로 반영할 수 있어요. CSS와 JSX의 조합을 잘 활용하면, 더욱 직관적이고 깔끔한 UI를 만들 수 있어요.