React 공식문서 (번역, 공부)

Keeping Components Pure

일부 JavaScript 함수는 순수하다. 순수 함수는 계산만 수행하고 그 이상은 수행하지 않는다. 컴포넌트를 순수함수로만 작성하면 코드가 커짐에 따라 당황스러운 버그와 예측할 수 없는 동작을 피할 수 있다. 순수: 공식으로써의 컴포넌트 순수함수는 다음과 같은 특성을 가진 함수이다. 자신의 일만 생각한다. 호출되기 전에 존재했던 객체나 변수는 변경하지 않는다. 동일한 입력, 동일한 출력. 동일한 입력이 주어지면 항상 동일한 출력을 반환해야 한다. 의도하지 않은 결과 React 렌더링 프로세스는 항상 순수해야한다. 컴포넌트는 JSX만 반환해야 하며 렌더링 전에 존재했던 객체나 변수를 변경하면 안된다. 다음은 이 규칙을 위반하는 컴포넌트이다. HTML 삽입 미리보기할 수 없는 소스 컴포넌트 밖에서 선언된 g..

Rendering Lists

JavaScript의 배열 메서드를 사용하여 데이터 배열을 조작할 수 있다. filter() 혹은 map()을 많이 사용한다. 배열 데이터 렌더링 아래와 같은 목록이 있다고 해보자. Creola Katherine Johnson: mathematician Mario José Molina-Pasquel Henríquez: chemist Mohammad Abdus Salam: physicist Percy Lavon Julian: chemist Subrahmanyan Chandrasekhar: astrophysicist 위와 같은 리스트의 형식으로 우리는 데이터를 다르게 하거나, 원하는 값만 뽑아낸다거나 하고싶을 수 있다. 또는 모든 리스트에 대해 어떠한 작업을 추가로 해서 렌더링 시키고 싶을 수 있다. 그럴때..

Conditional Rendering

React에서는 if문, &&, ? : 연산자와 같은 JavaScript 구문을 사용해서 JSX를 조건부로 렌더링할 수 있다. 조건부 JSX 반환 if문 if문을 사용하면 조건에 따라 다음과 같이 조건부 렌더링이 가능하다. if (isPacked) { return {name} ✔; } return {name}; 삼항 연산자 return ( {isPacked ? name + ' ✔' : name} ); 논리 AND 연산자(&&) return ( {name} {isPacked && '✔'} ); 해당 연산자에 대한 설명은 이미 전에 정리한 포스팅이 있으므로 아래 참고 바란다 (조건부 렌더링에 대한 설명 링크) JSX를 변수에 조건부로 할당 위에서는 if문을 통해서 바로 조건에 따라 JSX를 반환해주었지만, ..

Passing Props to a Component

React 컴포넌트들은 props를 사용하여 서로 통신한다. 부모 컴포넌트가 props로 자식 컴포넌트에게 정보를 전달할 수 있다. 컴포넌트에 props 전달 다음과 같은 코드에서는 부모 컴포넌트인 Profile이 자식 컴포넌트인 Avatar에게 props를 전달하지 않는다. export default function Profile() { return ( ); } 만약 Avatar에게 부모 컴포넌트인 Profile의 어떤 정보를 넘겨주고 싶다면 다음과 같이 전달해줄 수 있다. 1단계: 자식 컴포넌트에 props 전달 export default function Profile() { return ( ); } Avatar에게 person이라는 prop으로 객체와 size라는 prop으로 100을 전달해주었다...

JavaScript in JSX with Curly Braces

마크업 내에서 동적 속성을 참조하고 싶을 수 있다. 예를 들어 어떤 태그의 속성에 JavaScript 변수의 값을 넣고 싶을 수도 있다. 그럴 때 중괄호를 사용하면 된다. 따옴표로 문자열 전달 JSX에 문자열 속성을 전달하려면 작은따옴표나 큰따옴표로 묶어야 한다. HTML 삽입 미리보기할 수 없는 소스 위의 img 태그에서 src와 alt는 문자열로 전달이 된다. 하지만 문자열들을 따로 변수로 저장한 뒤에 긴 문자열 대신 변수로 삽입하고 싶다면 중괄호를 이용해서 아래와 같이 하면 된다. HTML 삽입 미리보기할 수 없는 소스 "double curlies" 사용: JSX의 CSS 및 기타 객체 문자열, 숫자 및 기타 JavaScript 표현식 외에도 JSX에서 객체를 전달할 수도 있다. JavaScript..

Writing Markup with JSX

JSX는 JavaScript 파일 내에서 HTML과 유사한 마크업을 작성할 수 있는 JavaScript 확장 구문이다. JSX: JavaScript에 마크업 넣기 웹은 HTML, CSS, JavaScript를 기반으로 구축된다. 그래서 우리는 배울 때 각자의 역할을 HTML은 콘텐츠, CSS는 디자인, 로직은 JavaScript로 분리해서 작성하였다. 하지만 웹이 점점 반응형, 상호작용을 중요시 하게 됨으로써 JavaScript가 HTML을 담당해가기 시작했다. 이것이 React에서 렌더링 요소와 마크업이 같은 위치, 즉 컴포넌트에 함께 존재하는 이유이다. 위의 왼쪽 예시처럼 동적으로 조건 판단을 요하는 요소가 있다면 JSX를 이용해 동적으로 렌더링이 가능하다. 또한 오른쪽 예시처럼 이벤트 리스너를 JS..