본문 바로가기

분류 전체보기

 (894)
[소플] 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..
[소플] ch 5. 컴포넌트와 Props 1. 컴포넌트 기반 구조 - 리액트를 컴포넌트 기반이라고 부르는 것은 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고, 또 이러한 컴포넌트들이 모여 전체 페이지를 구성하기 때문 - 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양이 줄어 개발 시간과 유지 보수 비용을 줄일 수 있음 - 리액트 컴포넌트는 어떠한 속성들을 입력받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴해줌 - 리액트 컴포넌트는 만들고자 하는대로 props(속성)을 넣으면 해당 속성에 맞춰 화면에 나타날 엘리먼트를 만들어 주는 것 2. Props - 리액트 컴포넌트의 속성 - 리액트 컴포넌트는 붕어빵 틀, Element는 붕어빵 틀에서 만들어진 붕어빵, props는 붕어빵에 들어가는 재료 - props는 같은 리액트 컴포넌트에..
[소플] ch4. 엘리먼트 렌더링 1. 엘리먼트의 정의 - Elements are the smallest building blocks of React apps - 앨리먼트는 리액트 앱의 가장 작은 빌딩 블록 - 실제 브라우저의 DOM에 존재하는 엘리먼트는 DOM 엘리먼트가 되는 것이고, 리액트의 Virtual DOM에 존재하는 엘리먼트가 바로 리액트 엘리먼트가 됨 - 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현 - 리액트 엘리먼트는 화면에서 보이는 것을 기술 2. 엘리먼트의 생김새 - 리액트 엘리먼트는 자바스크립트 객체 형태로 존재 - 엘리먼트는 컴포넌트 유형과 속성 및 내부의 모든 자식에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체 ex) Button을 나타내는 엘리먼트 - type에 HTML 태그 이름이 문자열로 들어가는 ..
[코드잇] ORM으로 하는 데이터베이스 작업 1. 데이터베이스와 SQL 데이터베이스(Database) - 일정한 체계 속에 저장된 데이터의 집합 - 하나의 row는 하나의 직원 정보를 의미 - 하나의 column은 직원 정보의 세부 정보들 중 하나를 의미 - 하나의 Database 안에는 여러 개의 Table이 들어갈 수 있음 데이터베이스의 데이터 처리 - 테이블에 있는 row를 조회하는 작업 - 테이블에 새로운 row를 추가하는 작업 - 테이블의 기존 row를 수정하는 작업 - 테이블의 기존 row를 삭제하는 작업 - 데이터베이스를 사용하려면 DBMS라고 하는 프로그램이 필요 DBMS(Database Managemnet System) - Database를 제어하기 위해 사용하는 프로그램 - 사용자가 입력한 SQL을 해석해서 데이터베이스 작업을 수..

티스토리툴바