react (46) 썸네일형 리스트형 [소플] ch 13. 합성 vs 상속 1. 합성에 대해 알아보기 합성(Composition) - 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 - 조합 방법에 따라 합성의 사용기법이 나눠짐 1) Containment - 하위 컴포넌트를 포함하는 형태의 합성 방법 - 사이드바(Sidebar)나 다이얼로그 (Dialog)같은 박스 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없음 -> 해당 컴포넌트를 사용하는 개바라가 어떤 것을 넣는냐에 따라 하위 컴포넌트가 달라지기 때문 -> Containment 방법을 사용하여 합성을 사용 - Containment를 사용하는 방법은 리액트 컴포넌트의 props에 기본적으로 들어 있는 children 속성 사용 - props.children를 통해 하위 컴포넌트를 하나로 모아서 제공 - p.. [소플] ch 12. State 끌어올리기 1. shared State - 공유된 state - 자식 컴포넌트들이 가장 가까운 부모 컴포넌트의 state를 공유해서 사용 - 어떤 컴포넌트의 state에 있는 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우 - 부모 컴포넌트는 degree라는 이름의 섭씨온도 값을 갖고 있음 - 컴포넌트 C는 온도를 섭씨로 표현하는 컴포넌트 - 컴포넌트 F는 온도를 화씨로 표현하는 컴포넌트 - 자식 컴포넌트들이 각각 온도 값을 가지고 있을 필요 없이, 부모 컴포넌트의 state에 있는 섭씨온도 값을 변환해서 표시해주면 됨 2. 하위 컴포넌트에서 State 공유하기 - 사용자로부터 온도를 입력받아서 각각 섭씨온도와 화씨온도로 표현해 주고 해당 온도에서 물이 끓는지 안 끓는지를 출력해주는 컴포넌트 1) 물의 끓음 .. [소플] ch 11. 폼 폼 - 사용자로부터 입력을 받기 위해 사용하는 것 1. 제어 컴포넌트 - 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트 - 그 값이 리액트의 통제를 받는 입력 폼 엘리먼트 (input from element) - 제어 컴포넌트를 사용하면 입력값이 리액트 컴포넌트의 state를 통해 관리됨 - HTML 폼에서는 각 엘리먼트가 자체적으로 state를 관리하게 됨 - , , 가 각각 내부의 state를 관리하고 있음 - 제어 컴포넌트에서는 모든 데이터를 state에서 관리 - state 값을 변경할 떄는 setState() 함수를 사용 - 함수 컴포넌트에서는 useState() 훅을 사용하여 state를 관리 ex) - 태그의 value={value} 부분은 리액트 컴포넌트의 state에서 .. [소플] ch 10. 리스트와 키 1. 리스트와 키 - 리액트에서는 배열과 키를 사용하여 반복되는 다수의 엘리먼트를 쉽게 렌더링할 수 있음 배열(Array) - 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것 const numbers = [1,2,3,4,5]; 키(Key) - 각 객체나 아이템을 구분할 수 있는 고유한 값 2. 여러 개의 컴포넌트 렌더링 하기 map() 함수 - 배열에 들어 있는 각 변수에 어떤 처리를 한 뒤 리턴 - 배열의 첫 번째 아이템부터 순서대로 각 아이템에 어떤 연산을 수행한 뒤에 최종 결과를 배열로 만들어서 리턴 ex) - map() 함수를 사용하여 numbers 배열에 들어있는 각 숫자에 2를 곱한 값이 들어간 doubled라는 배열을 생성 const doubled = numbers.map((numbe.. [소플] ch 9. 조건부 렌더링 1. 조건부 렌더링 조건부 렌더링(Conditional Rendering) - 어떠한 조건에 따라서 렌더링이 달라지는 것 - 조건문의 결과는 true 아니면 false가 나오는데 이 결과에 따라서 렌더링을 다르게 하는 것 ex) UserGreeting 컴포넌트 - 이미 회원인 사용자에게 보여줄 메시지를 출력하는 컴포넌트 function UserGreeting(props) { return 다시 오셨군요!; } GuestGreeting 컴포넌트 - 아직 가입하지 않은 게스트 사용자에게 보여줄 메시지 출력 function GuestGreeting(props) { return 회원가입을 해주세요. ; } Greeting 컴포넌트 - isLoggedIn 변수의 값이 true에 해당하는 값이면 UserGreetin.. [소플] ch 8. 이벤트 핸들링 1. 이벤트 처리하기 DOM의 이벤트 - 클릭 이벤트를 처리할 함수를 onclick을 통해 전달 - 이벤트를 처리할 함수를 문자열로 전달 Activate 리액트에서의 이벤트 - onClick으로 카멜 표기법 적용 - 이벤트를 처리할함수를 함수 그대로 전달 Activate 이벤트 핸들러 추가 - 이벤트 핸들러 = 어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수 1) 클래스 컴포넌트 - handleClick() 함수를 constructor()에서 bind()를 이용하여 this.handleClick에 대입 - bind를 하는 이유는 자바스크립트에서는 기본적으로 클래스 함수들이 바운드(Bound)되지 않음 - bind를 하지 않으면 this.handleClick은 글로벌 스코프(global scope).. [소플] ch 7. 훅 1. 훅 훅(Hook) - 원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 것 - 리액트의 state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것 - 훅의 이름은 모두 use로 시작 2. useState - state를 위한 훅 - 함수 컴포넌트에서는 기본적으로 state라는 것을 제공하지 않기 때문에 클래스 컴포넌트처럼 state를 사용하고 싶으면 useState() 훅을 사용해야 함 const [변수명, set함수명 ] = useState(초깃값); - 초깃값을 넣어 useState()를 호출하면 리턴 값으로 배열이 나옴 - 리턴된 배열의 첫 번째 항목은 state로 선언된 변수, 두 번째 항목은 해당 state의 set함수 - 클래.. [소플] ch 6. state와 생명 주기 1. State - 리액트 컴포넌트의 상태 - 리액트 컴포넌트의 변경 가능한 데이터 - state를 정의할 때 중요한 점은 꼭 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함 -> state가 변경될 경우 컴포넌트가 재렌더링되기 때문에 렌더링과 데이터 흐름에 관련 없는 값을 포함하면 컴포넌트가 다시 렌더링되어 성능을 저하 시킬 수 있음 2. state의 특징 - state는 자바스크립트 객체 ex) class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked=false; }; } ... } - constructor - 생성자, 클래스가 생성될 떄 실행되는 함수 - this.. 이전 1 2 3 4 5 6 다음
