리액트 스터디 - 심리스

4. JSX의 기본 규칙 ✅ JSX javascript에서 XML을 확장한 문법입니다. 리액트에서 XML형식의 코드를 리턴할 수 있습니다. 브라우저에서 실행시 Bable도구를 사용하여 일반 Javascript 코드로 변환합니다. 📌 태그는 꼭 닫혀있어야 합니다.

1. Sass 시작하기 node-sass 라이브러리 설치 className 에 CSS 클래스 이름을 동적으로 넣기 className={['Button', size].join(' ')} classnames 라이브러리 사용하여 손쉽게 문자열을 조합 할 수 있습니다. mixin mixin을 사용하여 반복되는 코드들을 재사용할 수 있습니다. 옵션 추가하기 ...

createGlobalStyle

API 요청 예시useReducer 로 구현했을 때의 장점은 useState 의 setState 함수를 여러번 사용하지 않아도 된다는점과, 리듀서로 로직을 분리했으니 다른곳에서도 쉽게 재사용을 할 수 있다는 점 입니다.커스텀훅(useAsync) 사용하기컴포넌트가 처음

시작하기react-router-dom 설치

페이지에 Hello World 를 출력하는 가장 간단한 예시입니다.JSX는 JavaScript를 확장한 문법입니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다.즉, JSX를 if 구문 및 for loop 안에

ReactDOM.render()를 호출React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출Welcome 컴포넌트는<h1>Hello, Sara</h1> 엘리먼트를 반환React DOM은 <h1>Hello, Sara&lt

직접 State를 수정하지 말고 setState를 사용할것State 업데이트는 비동기적일 수도 있습니다.this.state.counter가 비동기적으로 업데이트될 수 있기 때문에 아래 코드는 실패할 수 있습니다.setState의 인자로 객체가 아닌 함수를 전달하여 해결

if 나 조건부연산자 같은 javascript 연산자로 현재 상태에 맞게 UI를 업데이트할 수 있습니다.엘리먼트를 저장하기 위해 변수를 사용할 수 있습니다.

웹 접근성이란 어떠한 사용자(장애인, 노인 등), 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것.시멘틱 태그란 의미에 맞게 태그를 작성하는 것을 말합니다. <div>와 같은 엘리먼트를 남발할때

UI의 일부분에서 에러가 발생했을 때 애플리케이션 전체가 중단되지 않아야 합니다. Error Boundary(에러 경계)는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트입니다.생명주기 메서

일반적인 React 데이터 플로우에서, 자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링해야 합니다. 그러나 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우 Ref를 사용합니다.Ref 생성하기Ref에 접근하기React.create

render props 패턴으로 구현된 컴포넌트는 자체적으로 렌더링 로직을 구현하는 대신, react 엘리먼트 요소를 반환하는 함수를 props로 전달합니다.Mouse컴포넌트는 마우스 위치를 추적하는 로직을 캡슐화 한 것이고, MouseTracker컴포넌트는 이 Mou