[React] Udemy 강의 노트 3-3

 

 

JSX에서 동적데이터 출력 및 표현식 작업하기

- 컴포넌트와 HTML이 정의되면 그것을 재사용하려고 한다.

- 일반적으로 만드는 컴포넌트의 데이터들은 고정되어 있지 않다.

- 어떤 데이터는 고정될 수 있지만 제목, 양, 날짜 등은 동적인 것으로 변화하기 때문에 HTML 코드로 고정되면 안된다.

- 컴포넌트는 HTML과 CSS, 자바스크립트의 조합이다.

- 컴포넌트에서 자바스크립트 코드는 함수의 return 전에 입력한다.

- 보통은 HTML에 데이터를 고정 코드로 입력하지 않는다.

- 대신 동적 데이터 출력을 위해 JSX 코드 안에서 중괄호를 사용해서 기본적인 자바스크립트 코드를 실행할 수 있다는 것이다.

- 예를 들어 1+1이나 math.random()같은 메소드나, 변수, 반복문, 조건문을 사용할 수 있다.

- 구체적인 값은 http요청으로 받은 값일 수도 있고 상수나 변수로 저장된 것일 수도 있다.

 

 

 

props를 통해 데이터 전달하기

- 컴포넌트를 어떻게 재활용 할 수 있을까?

- 컴포넌트를 여러번 입력할 수도 있다. <ExpenseItem></ExpenseItem>

- 함수는 여러개의 작은 코드베이스로 기능을 나누어 사용할 수 있다.

- 함수를 여러번 호출해서 사용할 수 있다.

- 그러려면 함수에 매개변수를 받아들여서 동작하도록 만들고 매개변수를 바꾸면 된다.

- 그래서 함수는 일반적으로 매개변수에 따라 다른 값을 리턴하지만 함수는 매번 재사용할 수 있다.

- 그래서 매개변수를 사용하거나 리랙트의 props를 사용하면 된다. 

- 사용자 지정 컴포넌트에 속성을 추가해서 데이터를 전달할 수 있다.

- 컴포넌트 안에서 사용자 지정 컴포넌트에 설정되었을 수 있는 모든 속성에 접근할 수 있다.

- <CourseGoalItem text={goalItem} />과 같이 쓰고 속성attribute 대신 props를 사용한다.

- props는 properties를 나타내는 것으로 사용자 지정 컴포넌트의 속성을 설정할 수 있다.

- 데이터는 App.js에서 관리하고 ExpenseItem에서는 저장되지 않는다.

- 중괄호는 요소의 태그를 열고 닫는데만 사용하는 것이 아니라 속성에 값을 할당할때도 쓴다.

- 전달된 props를 매개변수로 받아 쓸 수 있다.

- 모든 컴포넌트에서 한 개의 매개변수만을 사용한다.

- 한 개의 매개변수는 모든 props를 받는 객체가 되어 자동으로 전달된다.

- props는 재사용 가능한 컴포넌트를 만들 수 있게 해주고, 다른 컴포넌트에서 컴포넌트로 데이터를 전달해준다.

 

컴포넌트에 일반 Javascript 논리 추가하기

- props는 동적으로 설정된 값에만 국한되는 것은 아니다.

- props는 설정 가능하고 재사용 할 수 있는 컴포넌트를 만들기 위해, 컴포넌트에 데이터를 전달하기 위해 사용한다.

- JSX 안에서 로직을 생성하기 보다는 상수나 변수에 담아서 JSX에 넣는 것이 읽기 쉽다.

 

컴포넌트를 여러 컴포넌트로 분할하기

- 작업하면서 컴포넌트가 자연스럽게 커진다.

- 컴포넌트는 응용 프로그램을 작게 나누고 각자 하나의 핵심 작업에 집중하게 한다.

- 컴포넌트를 비교적 작고 쉽게 관리하게 한다.  

- 이렇게 나누어진 컴포넌트들은 서로 중첩된다.

- props를 통해 데이터를 여러 개의 컴포넌트에 보낼 수 있다.