React - Main Concepts

※ 공식문서를 읽고 정리한 글입니다.React => 렌더링 로직과 UI로직이 연결된다는 사실을 받아들임 => 컴포넌트를 통해 둘을 분리하지 않고 사용JSX는 HTML 스타일로 리액트 컴포넌트를 생성할 수 있게 해주는 기술출처:https://ko.reactjs.

※ 공식문서를 읽고 정리한 글입니다.화면에 표시할 내용을 기술하는 리액트 앱의 가장 작은 단위Element는 일반적인 객체이며, React DOM에 의해 엘리먼트와 일치하게 DOM을 업데이트함React 애플리케이션에는 보통 하나의 Root DOM을 가지고 있음React

※ 공식문서를 읽고 정리한 글입니다.컴포넌트는 'props'라 하는 임의의 입력을 받아 React 엘리먼트를 반환하는 것으로, 자바스크립트의 함수와 유사함실제로 함수로 구현하는 함수 컴포넌트와 클래스를 사용하는 클래스 컴포넌트가 있음코드가 간단한 함수 컴포넌트를 더 많

※ 공식문서를 읽고 정리한 글입니다.Todo: 아래의 코드를 Hook없이 state를 사용해 리팩토링클래스형 컴포넌트를 만들 때에는 반환될 엘리먼트를 render() 메서드 안에 넣어주면 됨메서드를 선언할때 변수를 사용하지 않고 직접 선언함에 주의state 변수를 사용

※ 공식문서를 읽고 정리한 글입니다.onClick, onSubmit등의 camelCase name의 html 이벤트 속성을 부여Js에서와 달리 addEventListener를 추가할 필요 없음이벤트의 기본동작을 방지하고자 하는 경우 preventDefault()를 사용

※ 공식문서를 읽고 정리한 글입니다.자바스크립트의 조건문을 활용해 컴포넌트를 조건부로 출력 가능예문에서는 isLoggedin prop을 활용해 로그인 여부에 따라 다른 인삿말을 출력&&(논리곱) 또는 ||(논리합) 연산자를 활용해 코드를 단축시킬 수 있음예문에서는 un

※ 공식문서를 읽고 정리한 글입니다.map()함수를 이용해 배열이나 리스트를 원하는대로 변환할 수 있음마찬가지로 map()함수를 사용해 컴포넌트를 여러개 렌더링할 수 있음다만 코드를 실행하게 되면 key를 포함해야 한다는 경고가 나옴리스트 엘리먼트를 만들때에는 key

※ 공식문서를 읽고 정리한 글입니다.우리가 알고 있는 html의 form과 동일하게 값을 받아 이벤트를 발생시키게 된다그런데 입력값이 바뀔때마다 특수문자를 제거하는 등의 값을 제어해야하는 경우 어떻게 해야할까?이럴때 React의 방식으로 값을 제어할 수 있게 해주는 것

※ 공식문서를 읽고 정리한 글입니다.물의 온도를 입력으로 받아 끓는지 아닌지를 출력해주는 로직이다.화씨온도를 추가하려면 어떻게 해야할까? 앞서 있었던 Calculator 로직을 따로 TemperatureInput 컴포넌트로 분리하고, Calculator로직에는 scal

※ 공식문서를 읽고 정리한 글입니다.어떤 컴포넌트나 엘리먼트가 들어올지 모를 때, children prop을 사용해 자식 엘리먼트를 그대로 화면에 출력할 수 있음예문에서는 FancyBorder 컴포넌트 내부에 WelcomeDialog의 내용이 그대로 출력됨React E

※ 공식문서를 읽고 정리한 글입니다.아래 사진의 디자인을 React로 구현해보자, JSON API는 아래와 같다.각각의 컴포넌트를 구분해주는 것으로부터 UI 설계가 시작됨컴포넌트를 만드는 원칙은 함수나 객체를 만드는 것처럼 단일 책임 원칙에 따라 하면 됨 단일 책임