리액트로 드롭다운 메뉴를 만들어보자. 기능 설계 드롭다운은 버튼 클릭 등의 상호작용으로 요소를 활성화하면 그 아래 하위 메뉴들이 펼쳐지는 것이다. 본문에서 구현할 기능은 크게 세 가지로 나눌 수 있다. ✔︎ check list - 버튼으로 메뉴 열고 닫기 - 외부 영역 클릭 시 메뉴 닫기 - 메뉴 오픈 상태에서 외부 스크롤 방지

리액트 State 끌어올리기로 색상 코드 변환기를 만들어보자. State 끌어올리기 동일한 데이터의 상태를 여러 컴포넌트에서 사용하고 싶다면 해당 컴포넌트들의 공통 부모 컴포넌트로 state를 끌어올리는 것이 좋다. 아래 예시를 보며 차근차근 따라가 보자. 본문에서 설명할 예시는 RGB 코드를 HEX로, HEX 코드를 RGB로 변환시키는 색상 코드 변환기이다. 따로 convert 버튼을 누르지 않고 입력하는 즉시 변환된 코드를 보여주도록 할 것이다.

맥에서 React로 개발하기 위한 환경 설정과 VSCode 기본 설정을 해보자. macOS React 개발 환경 세팅 Homebrew 설치 먼저 macOS용 패키지 관리자인 `homebrew`를 설치한다. 위 사이트에 방문하여 Install Homebrew의 내용을 복사한 후 터미널에 붙여 넣어준다. 패스워드를 요구하는 문구가 뜨면 맥의 비밀번호를 입력한다. 그럼 아래와 같이 설치가 완료된다. (패스워드는 안 보이는 게 정상이다)

Tic Tac Toe Tic-Tac-Toe(틱택토)란 두 명이 3✕3 크기의 판에 번갈아가며 O와 X를 그려 가로, 세로 혹은 대각선 상에 놓이도록 하는 놀이이다. 오목과 비슷한 게임이라고 할 수 있다. React 공식문서에서 제공하는 튜토리얼을 참고해 리액트 기본 문법을 익힐 겸 만들어보려 한다.

error 원인 <a> 태그가 중첩되어서 발생하는 오류로, 블로그 포스트 페이지로 이동하는 링크 카드 내부에 태그와 연결되는 링크가 존재하기 때문이었다. 원칙적으로 html은 a 태그 중첩을 허용하지 않는다. 중첩된 링크를 클릭할 때 브라우저가 두 개의 a 태그를 동시에 감지하기 때문이다.

아토믹 디자인 패턴은 이름 그대로 화학 원리에서 힌트를 얻어 만들어졌다. 자연계에서 원자끼리 결합하여 분자를 형성하고 분자끼리 결합하여 유기체를 형성하는 것처럼 동일한 프로세스를 UI 설계와 개발에 적용하는 것이다. 아토믹 디자인에서는 다음과 같은 5가지 단계로 페이지와 컴포넌트를 분리한다.

Create React App(이하 CRA)은 리액트로 웹을 만들기 위한 환경을 제공한다. 이를 사용하면 babel과 webpack을 포함한 여러 개발 환경을 한번에 구축할 수 있다. 설치 방법. npx npm 5.2 이상인 경우 $ npx create-react-app [프로젝트명] yarn $ yarn create react-app [프로젝트명]

class와 for는 자바스크립트와 ECMAScript의 예약어이므로 JSX에서 사용할 수 없다. 대신 className과 htmlFor를 사용한다. class와 for대신 `className`과 `htmlFor`를 사용하면 된다. className. HTML에서의 `class` 속성 <div className="menu"></div>