전체 글 썸네일형 리스트형 styled-components&(실습) styled-components를 사용하여 스타일링 해보기 다양한 종류의 literal untagged template literal 과 tagged template literal 주석(설명) 실제로 구현한 untagged template literal 과 tagged template literal 사용법 mytagfunction라는 함수에 파리미터와 expression 이 들어가 있다. tagged template literal을 사용하면 문자열과 expression을 funcuion에 파라미터를 넣어 호출한 결과를 받는다. styled.button 내부에 props을 사용한것을 알수있다. button 컴포넌트는 html 기반으로 만들어진 단순한 버튼 디자인이다. roundedbutton 컴포넌트에는 html이 빠져있고 button컴포넌트가 가로안에 있다. 이.. 더보기 Context API&(실습) Context를 사용하여 테마 변경 기능 만들기 만약 상위 레벨에 매칭되는 Provider가 없다면 기본값이 사용된다. 기본값으로 undefined를 넣으면 기본값이 사용되지 않음 하위 컴포넌트에 Context를 사용한다면 하위 컴포넌트에서 업데이트가 발생한다. Provider 컴포넌트가 재렌더링될 때마다 모든 하위 consumer 컴포넌트가 재랜더링 된다. state를 사용하여 불필요한 재렌더링을 막는다. Class.contextType Class함수의 사용법 이런 방법이 있다고만 참고한다. MyClass,contextType = MyContext; 라고 해주면 MyClass 컴포넌트에 MyContext를 접근할 수 있다. 이 속성을 사용시 this.context 에 상위에 있는 Provider중에 가장 가까운 값을 가져올수 있다. render 함수.. 더보기 Composition 방법과 Inheritance&(실습) Card 컴포넌트 만들기 FancyBorder 컴포넌트는 주어진 color 속성을 사용하여 스타일을 가진 요소를 생성합니다.이 컴포넌트는 자식 요소(props.children)를 이 스타일이 적용된 요소 안에 포함시킵니다. WelcomeDialog 컴포넌트는 FancyBorder 컴포넌트를 사용하여 특정 스타일과 색상을 가진 박스를 생성합니다.이 컴포넌트 안에는 환영 메시지를 나타내는 요소와 설명을 담은 요소가 포함되어 있습니다. SplitPane 컴포넌트는 두 개의 자식 요소(props.left와 props.right)를 가지는 요소를 생성합니다. 첫 번째 자식 요소는 왼쪽 패널(SplitPane-left)에 표시되고, 두 번째 자식 요소는 오른쪽 패널(SplitPane-right)에 표시됩니다. App 컴포넌트는 SplitP.. 더보기 하위 컴포넌트에서 State 공유하기&(실습) 섭씨온도와 화씨온도 표시하기 온도를 입력받는 React 컴포넌트인 TemperatureInput을 정의한 것입니다. 사용자가 입력한 온도 값을 처리하고 화면에 표시합니다. 부모 컴포넌트로부터 온도, 온도 단위, 그리고 온도 변경 이벤트 처리 함수를 props로 받아와 사용합니다. 사용자가 입력한 온도 값을 props.onTemperatureChange 함수를 호출하여 부모 컴포넌트로 전달하며, 온도 입력 필드와 단위를 포함한 UI를 렌더링합니다. useState를 사용하여 temperature과 scale이라는 상태 변수를 초기화합니다. temperature는 사용자가 입력한 온도 값을 저장하고, scale은 현재 선택된 온도 단위를 저장합니다. handleCelsiusChange 및 handleFahrenheitChange 함수는.. 더보기 Form과 Controlled Component&(실습) 사용자 정보 입력 받기 초기값은 빈 문자열('')입니다. handleChange 함수는 입력 필드의 값이 변경될 때 호출됩니다. 이 함수는 이벤트 객체를 받아와서 setValue 함수를 사용하여 value 상태를 업데이트합니다. handleSubmit 함수는 폼이 제출될 때 호출됩니다. 이 함수는 경고창을 띄우고, 입력한 이름을 보여줍니다. 그리고 기본 제출 동작을 방지하기 위해 event.preventDefault()를 호출합니다. value={value} onChange={handleChange} value는 우리가 상태로 관리하고 있는 값이며, onChange 이벤트가 발생하면 handleChange 함수가 호출됩니다. 버튼을 누르면 폼이 제출되고, handleSubmit 함수가 호출됩니다. 입력한 value 값을 전부 .. 더보기 여러 개의 Component 렌더링 하기&(실습) 출석부 출력하기 이 코드는 "numbers" 배열의 모든 요소를 두 배로 만들어서 "doubled" 배열에 저장하는 것입니다. ".map()" 배열 메서드를 사용하여 "numbers" 배열의 각 요소를 순회하면서 각 요소를 HTML 리스트 아이템()으로 변환한 새로운 배열을 생성합니다. 따라서 이 코드는 숫자 배열을 사용하여 HTML 목록을 생성하고, 이 목록을 웹 페이지의 "root" 요소에 렌더링하여 화면에 순서가 있는 목록을 표시합니다. (실습) 출석부 출력하기 "students" 배열에 학생 정보 객체들이 저장되어 있습니다. 각 객체는 학생의 ID와 이름을 가지고 있습니다. "AttendanceBook"이라는 React 함수 컴포넌트를 정의합니다. 이 컴포넌트는 "props"를 매개변수로 받습니다. JSX 문법을.. 더보기 Conditional Rendering의 정의와 Inline Conditions&(실습) 로그인 여부를 나타내는 툴바 만들기 첫번째는 이미 회원인 사용자에게 보여줄 화면. 두번째는 회원이 아닌 사용자에게 보여줄 화면. 위 함수 컴포넌트는 isLoggedIn 함수의 값이 들어오면 위 함수가 참일때 UserGreeting 반환. 위 함수가 거짓일때 GuestGreeting 반환. 첫번째는 로그인 하는 함수. 두번쨰는 로그아웃 하는 함수. useState를 사용하여 현재 로그인 상태를 저장하고, handleLoginClick 함수와 handleLogoutClick 함수를 사용하여 로그인 및 로그아웃 이벤트를 처리합니다. isLoggedIn 변수에 따라 로그인 또는 로그아웃 버튼을 표시하며, Greeting 컴포넌트를 통해 현재 로그인 상태를 화면에 표시합니다. unreadMessages 변수는 props로 전달된 "unreadMes.. 더보기 리엑트 Event의 정의 및 Event 다루기&(실습) 클릭 이벤트 처리하기 DOM의 Event 리엑트의 Event 카멜 표기법 사용 constructor에 bind를 사용하여 this.handleClick 에 대입해 준다. 함수 컴포넌트애서는 this로 이벤트를 넣지않고 곧바로 정의한 이벤트 헨들러를 넣어주면 된다. 클래스에서 사용하는 Arguments 전달하기 함수 컴포넌트에서 매게변수를 전달할때 다음과 같이 작성하면 된다. (실습) 클릭 이벤트 처리하기 해당 컴포넌트 클래스에 확인여부를 위해 state에 isConfirmed: false 초기값을 넣어준다. onClick을 동작하기 위해 이벤트헨들러인 handleConfirm() 함수를 만들어 넣어준다. bind를 사용하여 이벤트핸들러를 처리함. class fields syntax 사용하기 함수 컴포넌트를 사용하면 useSt.. 더보기 이전 1 2 3 다음
