본문 바로가기

React 기초

 (8)
[React] Form (8) HTML Name: - 태그로 name을 입력받음 JS - 제어 컴포넌트 사용 제어 컴포넌트 - JS 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근하도록 - 변경값은 state에 유지되며 setState()에 의해 업데이트 됨 class NameForm extends React.Component { constructor(props) { // 생성자 super(props); this.state = {value: ''}; // 빈칸으로 초기화 this.handleChange = this.handleChange.bind(this); // 바인딩 this.handleSubmit = this.handleSubmit.bind(this); // 바인딩 } // event 값이 변경되면 value의 ..
[React] List와 Key (7) - map() : 반복 실행 const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); // map으로 배열의 값을 두 배로 만듦 console.log(doubled); 결과 2, 4, 6, 8, 10 여러 개의 컴포넌트 렌더링 하기 const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} ); - 1 -> 1 - 2 -> 2 ... - map을 이용해 1부터 5까지 숫자를 리스트 형식으로 바꿔줌 {listItems} 기본 리스트 컴포넌트 - key: 엘리먼트 리스트를 만들 때 포함해야 하는 특수 문자열 어트리뷰트 - ..
[React] 조건부 렌더링 (6) 로그인 / 로그아웃 예제 - isLoggedIn이 true면 로 렌더링 - isLoggedIn이 false면 로 렌더링 function UserGreeting(props) { // 로그인 후 return Welcome back!; } function GuestGreeting(props) { // 로그인 전 return Please sign up.; } - Greeting() 메서드 -> isLoggedIn 값에 따른 조건부 렌더링 function Greeting(props) { // if문으로 어디로 렌더링 할지 결정 const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; } return ; } const root = ReactDOM.create..
[React] 이벤트 처리하기 (5) HTML과 React 문법 차이 1. 이벤트 처리 HTML 문법 Activate Lasers React 문법 - ( ) 괄호 떼기 - { } 중괄호로 감싸기 Activate Lasers 2. preventDefault() - React는 false를 반환해도 기본 동작 방지 불가능 - 반드시 preventDefault 명시적 호출 HTML 문법 Submit React 문법 - e : 합성 이벤트 -> 브라우저 호환성 걱정 ❌ function Form() { function handleSubmit(e) { e.preventDefault(); // 기본 동작을 방지해줌 ex) 제출 console.log('You clicked submit.'); } return ( Submit ); } On / Off 버튼 ..
[React] State와 생명주기 (4) 시계 예제 const root = ReactDOM.createRoot(document.getElementById('root')); function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } function tick() { root.render(); } setInterval(tick, 1000); - 1초마다 을 새롭게 렌더링하는 방법 -> 이 스스로 업데이트하도록 만들고 싶다면? 함수에서 클래스로 변환하기 1. React.Component를 확장하는 동일한 이름의 class를 생성 class Clock extends React.Component 2. render()라고 불리는 빈 메서드 추가 - 업..
[React] Components와 Props (3) Components 컴포넌트 - UI를 재사용 가능한 개별적인 조각으로 나눔 - JS의 함수와 유사 - 이름의 시작은 항상 대문자 function Welcome(props) { return Hello, {props.name}; } props - 순수 함수처럼 동작 -> 입력한 값을 바꾸려 하지 않고 동일한 결과 반환 - 값을 바꾸고 싶을 땐 state 사용 (다음 장) React element에 사용자 정의 components 담기 const element = ; // props
[React] Element 렌더링 (2) 해당 글은 https://ko.reactjs.org/docs/introducing-jsx.html를 참고하고 있습니다. Element란 - React 앱의 가장 작은 단위 - React DOM은 React element와 일치하도록 DOM을 업데이트 - element != component Root DOM - 위 코드 안에 들어가는 모든 element를 React DOM에서 관리 -> Root Dom DOM에 element 렌더링하기 1. DOM element를 ReactDOM.createRoot()에 전달 2. React element를 root.render()에 전달 const root = ReactDOM.createRoot( // Root DOM 생성 document.getElementById('r..
[React] Hello World! (1) 해당 글은 https://ko.reactjs.org/docs/introducing-jsx.html를 참고하고 있습니다. React의 시작 const root = ReactDOM.createRoot(document.getElementById('root')); root.render(Hello World!); JSX란 JavaScript를 확장한 문법 const element = Hello World! JSX 표현식 const name = 'Good Coder'; const element = Hello, {name}; 실행 결과: Hello, Good Coder JSX의 { } 안에는 모든 JavaScript 표현식을 넣을 수 있다. 예) 2+2, user.firstName, formatName(user) ...

티스토리툴바