빠른 시작
React 문서에 오신 것을 환영합니다! 이 페이지에서는 일상적으로 사용하게 될 React 개념의 80%를 소개합니다.
배울 내용
- 컴포넌트를 생성하고 중첩하는 방법
- 마크업과 스타일을 추가하는 방법
- 데이터를 표시하는 방법
- 조건부 렌더링과 목록을 렌더링하는 방법
- 이벤트에 응답하고 화면을 업데이트하는 방법
- 컴포넌트 간에 데이터를 공유하는 방법
컴포넌트 생성 및 중첩
React 앱은 컴포넌트로 구성됩니다. 컴포넌트는 고유한 로직과 외관을 가진 UI(사용자 인터페이스)의 일부입니다. 컴포넌트는 버튼처럼 작을 수도 있고, 전체 페이지처럼 클 수도 있습니다.
React 컴포넌트는 마크업을 반환하는 JavaScript 함수입니다:
이제 MyButton을 선언했으므로 다른 컴포넌트 안에 중첩할 수 있습니다:
참고로 <MyButton />는 대문자로 시작합니다. 이것이 React 컴포넌트임을 알 수 있는 방법입니다. React 컴포넌트 이름은 항상 대문자로 시작해야 하며, HTML 태그는 소문자여야 합니다.
결과를 확인해 보세요:
키워드export default는 파일의 주요 컴포넌트를 지정합니다. JavaScript 구문 중 익숙하지 않은 부분이 있다면,MDN과 javascript.info에 훌륭한 참고 자료가 있습니다.
JSX로 마크업 작성하기
위에서 본 마크업 구문은 JSX라고 합니다. 선택 사항이지만, 대부분의 React 프로젝트는 편의성을 위해 JSX를 사용합니다.로컬 개발을 위해 권장하는 모든 도구는 JSX를 기본적으로 지원합니다.
JSX는 HTML보다 엄격합니다.<br />와 같은 태그를 닫아야 합니다. 또한 컴포넌트는 여러 JSX 태그를 반환할 수 없습니다.<div>...</div>나 빈 <>...</>래퍼와 같은 공통 부모로 감싸야 합니다:
JSX로 변환할 HTML이 많다면온라인 변환기를 사용할 수 있습니다.
스타일 추가하기
React에서는 CSS 클래스를className으로 지정합니다. 이는 HTML의class속성과 동일하게 작동합니다:
그런 다음 별도의 CSS 파일에 해당 CSS 규칙을 작성합니다:
React는 CSS 파일을 추가하는 방법을 규정하지 않습니다. 가장 간단한 경우, HTML에<link>태그를 추가합니다. 빌드 도구나 프레임워크를 사용하는 경우, 해당 문서를 참조하여 프로젝트에 CSS 파일을 추가하는 방법을 알아보세요.
데이터 표시하기
JSX를 사용하면 마크업을 JavaScript 안에 넣을 수 있습니다. 중괄호를 사용하면 JavaScript로 "탈출"하여 코드의 일부 변수를 포함시켜 사용자에게 표시할 수 있습니다. 예를 들어, 다음은user.name을 표시합니다:
JSX 속성에서도 JavaScript로 "탈출"할 수 있지만, 따옴표대신중괄호를 사용해야 합니다. 예를 들어,className="avatar"는 문자열"avatar"을 CSS 클래스로 전달하지만,src={user.imageUrl}는 JavaScript 변수user.imageUrl의 값을 읽은 다음 그 값을 src속성으로 전달합니다:
JSX 중괄호 안에는 더 복잡한 표현식도 넣을 수 있습니다. 예를 들어,문자열 연결:
위 예시에서 style={{}}는 특별한 문법이 아니라,{} 객체를 style={ }JSX 중괄호 안에 넣은 것입니다. 스타일이 JavaScript 변수에 의존할 때style 속성을 사용할 수 있습니다.
조건부 렌더링
React에는 조건을 작성하기 위한 특별한 문법이 없습니다. 대신 일반 JavaScript 코드를 작성할 때 사용하는 것과 동일한 기술을 사용하게 됩니다. 예를 들어, 조건부로 JSX를 포함시키기 위해if문을 사용할 수 있습니다:
더 간결한 코드를 선호한다면,조건부 ? 연산자를 사용할 수 있습니다.if와 달리 JSX 내부에서 작동합니다:
else 분기가 필요하지 않을 때는 더 짧은논리 && 구문을 사용할 수도 있습니다:
이러한 모든 접근 방식은 속성을 조건부로 지정할 때도 작동합니다. 이 JavaScript 구문 중 일부가 익숙하지 않다면, 항상if...else를 사용하는 것으로 시작할 수 있습니다.
목록 렌더링
컴포넌트 목록을 렌더링하려면for 루프 및 배열 map() 함수와 같은 JavaScript 기능에 의존하게 됩니다.
예를 들어, 제품 배열이 있다고 가정해 보겠습니다:
컴포넌트 내부에서 map() 함수를 사용하여 제품 배열을 <li>항목 배열로 변환합니다:
각 <li>에 key속성이 있는 것을 확인하세요. 목록의 각 항목에 대해, 해당 항목을 형제 항목 중에서 고유하게 식별하는 문자열이나 숫자를 전달해야 합니다. 일반적으로 키는 데이터베이스 ID와 같이 데이터에서 가져와야 합니다. React는 나중에 항목을 삽입, 삭제 또는 재정렬할 때 어떤 일이 발생했는지 알기 위해 키를 사용합니다.
이벤트에 응답하기
컴포넌트 내부에 이벤트 핸들러함수를 선언하여 이벤트에 응답할 수 있습니다:
주의: onClick={handleClick}끝에 괄호가 없습니다! 이벤트 핸들러 함수를호출하지 마세요: 단지 전달만 하면 됩니다. React는 사용자가 버튼을 클릭할 때 이벤트 핸들러를 호출합니다.
화면 업데이트하기
종종 컴포넌트가 일부 정보를 "기억"하고 표시하길 원할 것입니다. 예를 들어, 버튼이 클릭된 횟수를 세고 싶을 수 있습니다. 이를 위해 컴포넌트에상태를 추가하세요.
먼저, React에서useState를 가져옵니다:
이제 컴포넌트 내부에상태 변수를 선언할 수 있습니다:
여러분은 useState로부터 두 가지를 얻습니다: 현재 상태(count)와 그것을 업데이트할 수 있는 함수(setCount)입니다. 원하는 이름을 지을 수 있지만, 관례적으로[something, setSomething]과 같이 작성합니다.
버튼이 처음 표시될 때,count는 0이 될 것입니다. 왜냐하면 여러분이0을 useState()에 전달했기 때문입니다. 상태를 변경하고 싶을 때는setCount()를 호출하고 새로운 값을 전달하세요. 이 버튼을 클릭하면 카운터가 증가합니다:
React는 여러분의 컴포넌트 함수를 다시 호출할 것입니다. 이번에는count가 1이 될 것입니다. 그다음에는2가 될 것입니다. 이런 식으로 계속됩니다.
동일한 컴포넌트를 여러 번 렌더링하면, 각각은 자신만의 상태를 갖게 됩니다. 각 버튼을 따로 클릭해 보세요:
각 버튼이 자신만의 count상태를 “기억”하고 다른 버튼에 영향을 주지 않는 것을 확인하세요.
Hook 사용하기
함수 이름이 use로 시작하는 함수를Hook이라고 합니다.useState는 React가 제공하는 내장 Hook입니다. 다른 내장 Hook은API 레퍼런스에서 찾을 수 있습니다. 또한 기존 Hook들을 조합하여 여러분만의 Hook을 작성할 수도 있습니다.
Hook은 다른 함수들보다 더 제한적입니다. Hook은 컴포넌트(또는 다른 Hook)의최상위에서만 호출할 수 있습니다. 조건문이나 반복문 안에서useState를 사용하려면, 새로운 컴포넌트를 추출하여 그 안에 배치하세요.
컴포넌트 간 데이터 공유하기
이전 예제에서 각MyButton은 독립적인 count를 가지고 있었고, 각 버튼을 클릭했을 때 클릭된 버튼의count만 변경되었습니다:
처음에는 각MyButton의count상태가0입니다.
첫 번째MyButton이 자신의count를 1로 업데이트합니다.
그러나 종종 컴포넌트들이데이터를 공유하고 항상 함께 업데이트해야 할 필요가 있습니다.
두 MyButton컴포넌트가 동일한count를 표시하고 함께 업데이트하도록 만들려면, 상태를 개별 버튼들로부터 그들을 모두 포함하는 가장 가까운 컴포넌트로 “위로” 이동시켜야 합니다.
이 예제에서는 그것이MyApp입니다:
처음에 MyApp의count상태는0이며 두 자식 컴포넌트로 전달됩니다.
클릭 시,MyApp은 count상태를1로 업데이트하고 두 자식 컴포넌트로 전달합니다.
이제 버튼 중 하나를 클릭하면MyApp의 count가 변경되고, 이는 MyButton의 두 카운트 모두를 변경합니다. 이를 코드로 표현하는 방법은 다음과 같습니다.
먼저,상태를 위로 올리세요. MyButton에서MyApp으로 상태를 이동합니다:
그런 다음,상태를 아래로 전달하세요. MyApp에서 각MyButton으로 상태를 공유 클릭 핸들러와 함께 전달합니다.MyButton에 정보를 전달하려면 JSX 중괄호를 사용하면 되며, 이전에<img>와 같은 내장 태그에 했던 것과 같습니다:
이렇게 전달하는 정보를 props라고 합니다. 이제MyApp 컴포넌트는 count 상태와 handleClick이벤트 핸들러를 포함하며,둘 다 props로 각 버튼에 전달합니다.
마지막으로,MyButton을 변경하여 부모 컴포넌트에서 전달된 props를읽도록 합니다:
버튼을 클릭하면 onClick핸들러가 실행됩니다. 각 버튼의onClick prop은 MyApp 내부의 handleClick함수로 설정되었으므로 그 안의 코드가 실행됩니다. 해당 코드는setCount(count + 1)를 호출하여count상태 변수를 증가시킵니다. 새로운count값은 각 버튼에 prop으로 전달되어 모두 새로운 값을 표시합니다. 이를 "상태 끌어올리기"라고 합니다. 상태를 위로 올려 컴포넌트 간에 공유한 것입니다.
다음 단계
지금까지 React 코드 작성의 기본을 배웠습니다!
이를 실습에 적용하고 첫 번째 React 미니 앱을 만들려면튜토리얼을 확인하세요.