[React] State 끌어올리기
2022. 10. 19. 20:41
프로그래밍/React
State 끌어올리기 종종 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 필요가 있음 이럴 때는 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋음 이런 일을 어떻게 할 수 있을지 지금부터 살펴보자 이번 섹션에서는 주어진 온도에서 물의 끓는 여부를 추정하는 온도 계산기를 만들어볼 것임 먼저 BoilingVerdict라는 이름의 컴포넌트부터 만들어보자 이 컴포넌트는 섭씨온도를 의미하는 celsius prop를 받아서 이 온도가 물이 끓기에 충분한지 여부를 출력함 function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return The water would not boil...
[React] Form
2022. 10. 18. 20:25
프로그래밍/React
Form HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작함 예를 들어, 순수한 HTML에서 이 폼은 name을 입력받음 Name: 이 폼은 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행함 React에서 동일한 동작을 원한다면 그대로 사용하면 됨 그러나 대부분의 경우, JavaScript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리함 이를 위한 표준 방식은 “제어 컴포넌트 (controlled components)“라고 불리는 기술을 이용하는 것임 제어 컴포넌트 (Controlled Component) HTML에서 , , 와 같은 폼 엘리먼트는 일반적으로 사용자의..
[React] history.goback() 대체
2022. 10. 17. 20:12
프로그래밍/React
history.goback() 대체 React Router v6로 업그레이드 되면서 history.goback()이 작동하지 않는 경우 👉 useNavigate 사용 useNavigate 예시 import { useNavigate } from 'react-router-dom'; function YourApp() { const navigate = useNavigate(); return ( navigate(-1)}>go back ); } 코드 개선 예제 기존 코드 const onCancel = () => { history.goback() } 변경 코드 const navigate = useNavigate(); const onCancel = () => { navigate(-1); }
[React] 리스트와 Key
2022. 10. 14. 20:15
프로그래밍/React
리스트와 Key 먼저 JavaScript에서 리스트를 어떻게 변환하는지 살펴보자 아래는 map()함수를 이용하여 numbers 배열의 값을 두배로 만든 후 map()에서 반환하는 새 배열을 doubled 변수에 할당하고 로그를 확인하는 코드임 const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); 이 코드는 콘솔에 [2, 4, 6, 8, 10]을 출력 React에서 배열을 엘리먼트 리스트로 만드는 방식은 이와 거의 동일 여러개의 컴포넌트 렌더링 하기 엘리먼트 모음을 만들고 중괄호 {}를 이용하여 JSX에 포함 시킬 수 있음 아래의 JavaScript map() 함수를 ..
[React] 조건부 렌더링
2022. 10. 13. 20:02
프로그래밍/React
조건부 렌더링 React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있음 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있음 React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작함 if 나 조건부 연산자 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용한다면 React는 현재 상태에 맞게 UI를 업데이트할 것임 아래 두 컴포넌트가 있다고 가정해 보자 function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.; } 이제 사용자의 로그인 상태에 맞게 위 컴포넌트 중 하나를 ..
[React] 이벤트 처리하기
2022. 10. 12. 20:18
프로그래밍/React
이벤트 처리하기 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사함 몇 가지 문법 차이는 다음과 같음 React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용 JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달함 예를 들어, HTML은 다음과 같음 Activate Lasers React에서는 약간 다름 Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없음 반드시 preventDefault를 명시적으로 호출해야 함 예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있음 Submit React에서는 다음..
[React] state 라이프사이클
2022. 10. 11. 20:59
프로그래밍/React
State and Lifecycle React 컴포넌트 안의 state와 생명주기에 대한 개념 소개 엘리먼트 렌더링에서는 UI를 업데이트하는 한 가지 방법만 배웠으며, 렌더링 된 출력값을 변경하기 위해 root.render()를 호출했음 const root = ReactDOM.createRoot(document.getElementById('root')); function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); root.render(element);} setInterval(tick, 1000); CodePen에서 시도해보기 이 섹션에서는 Clock 컴포넌트를 완전히 재사용하고 캡슐화하는 방법을 ..
[React] Components와 Props
2022. 10. 7. 20:10
프로그래밍/React
Components와 Props 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음 이 페이지에서는 컴포넌트의 개념을 소개할 것임 👉 자세한 컴포넌트 API 레퍼런스는 여기에서 확인 개념적으로 컴포넌트는 JavaScript 함수와 유사함 “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것 function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) 객체 ..