[React] 조건부 렌더링
2022. 10. 13. 20:02
프로그래밍/React
조건부 렌더링 React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있음 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있음 React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작함 if 나 조건부 연산자 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용한다면 React는 현재 상태에 맞게 UI를 업데이트할 것임 아래 두 컴포넌트가 있다고 가정해 보자 function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.; } 이제 사용자의 로그인 상태에 맞게 위 컴포넌트 중 하나를 ..
[React] 이벤트 처리하기
2022. 10. 12. 20:18
프로그래밍/React
이벤트 처리하기 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사함 몇 가지 문법 차이는 다음과 같음 React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용 JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달함 예를 들어, HTML은 다음과 같음 Activate Lasers React에서는 약간 다름 Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없음 반드시 preventDefault를 명시적으로 호출해야 함 예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있음 Submit React에서는 다음..
[React] state 라이프사이클
2022. 10. 11. 20:59
프로그래밍/React
State and Lifecycle React 컴포넌트 안의 state와 생명주기에 대한 개념 소개 엘리먼트 렌더링에서는 UI를 업데이트하는 한 가지 방법만 배웠으며, 렌더링 된 출력값을 변경하기 위해 root.render()를 호출했음 const root = ReactDOM.createRoot(document.getElementById('root')); function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); root.render(element);} setInterval(tick, 1000); CodePen에서 시도해보기 이 섹션에서는 Clock 컴포넌트를 완전히 재사용하고 캡슐화하는 방법을 ..
[React] Components와 Props
2022. 10. 7. 20:10
프로그래밍/React
Components와 Props 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음 이 페이지에서는 컴포넌트의 개념을 소개할 것임 👉 자세한 컴포넌트 API 레퍼런스는 여기에서 확인 개념적으로 컴포넌트는 JavaScript 함수와 유사함 “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것 function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) 객체 ..
[React] 엘리먼트 렌더링
2022. 10. 6. 20:13
프로그래밍/React
엘리먼트 렌더링 엘리먼트는 React 앱의 가장 작은 단위 엘리먼트는 화면에 표시할 내용을 기술 const element = Hello, world; 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있음 React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트함 주의 더 널리 알려진 개념인 “컴포넌트”와 엘리먼트를 혼동할 수 있음 엘리먼트는 컴포넌트의 “구성 요소”임 DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가에 가 있다고 가정해보자 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부름 React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있음..
[React] JSX란?
2022. 10. 5. 20:02
프로그래밍/React
아래 변수 선언을 살펴보자 const element = Hello, world!; 이 문법은 문자열도, HTML도 아닌 JSX이며 JavaScript를 확장한 문법임 UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장함 JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있음 JSX는 React “엘리먼트(element)” 를 생성함 JSX란? React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들임 React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “..
[jQuery] Ajax의 Success와 Done의 차이
2022. 9. 30. 20:39
프로그래밍/jQuery
Ajax의 동작 방식 브라우저에서 Ajax 요청을 담당하는 XMLHttpRequest라는 객체를 통해 서버에 정보를 요청, 응답받음 콜백 동작 순서 성공 시 : success > complete > done > always 실패 시 : error > complete > fail > always jQuery를 이용한 Ajax Ajax의 기본 Method를 이용하면 XMLHttpRequest를 직접 사용하게 되는데 때문에 이러한 복잡한 과정 없이 jQuery를 이용하면 간단하게 서버와 데이터를 주고받을 수 있음 또한 크로스 브라우징 문제도 jQuery가 알아서 해결해주고 여러 가지 편리한 기능들을 제공 $.ajax([settings]) 함수의 property https://api.jquery.com/jque..
[Spring Error] cannot deserialize from Object value (no delegate- or property-based Creator)
2022. 9. 29. 20:22
프로그래밍/Spring
cannot deserialize from Object value (no delegate- or property-based Creator) 에러 발생 jackson 라이브러리가 빈 생성자가 없는 모델을 생성하는 방법을 모르기 때문에 발생함 💡 해결 방법 @NoArgsConstructor를 추가하여 빈 생성자 생성 수정 전 코드 👇 @Getter @AllArgsConstructor public class UserLoginRequest { private String userName; private String password; } 수정 후 코드 👇 @Getter @NoArgsConstructor @AllArgsConstructor public class UserLoginRequest { private Str..