-

useEffect라는 Hook을 사용하여 마운트, 언마운트를 관리할 수 있다. UserList.js import React, { useEffect } from 'react'; function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); return ( onToggle(user.id)} > {user.username} ({user.email}) onRemove(user.id)}>삭제 ); } function UserList({ users, onRemove, onToggle }) { return ( {..

다음과 같은 배열이 있다고 가정하자. const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; 이 배열을 컴포넌트로 렌더링해야할 때, 그대로 코드를 작성하는 것은 비효율적이다. 또한 배열이 고정적이라면 상관이 없겠지만 배열의 인덱스를 하나하나 조회해가면서 렌더링하는 방법은 동적인 배열을 렌더링하지 못한다. 동적인 배열을 렌더링할 때는 자바스크립트 배열의 내장함수인 map() 함수를 사용한다. map() 함수..

리액트 16.8 이전 버전에서는 함수형 컴포넌트로 상태를 관리할 수 없었다. 하지만 리액트 16.8에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 간단하게 카운터 예제로 확인해보자. Counter.js import React from 'react'; function Counter() { return ( 0 +1 -1 ); } export default Counter; App.js import React from 'react'; import Counter from './Counter'; function App() { return ( ); } export default App; 위 코드를 실행하면 이런 화면이 뜬다. 이벤트 설정 Counter.js import R..

안드로이드 스튜디오 활용법 익히기 안드로이드스튜디오에서는 앱 UI를 굉장히 직관적으로 디자인할 수 있고, 그렇게 디자인했을 때 코드도 자동으로 작성된다는 큰 장점이 있다. XML 파일을 열면 위와 같은 화면이 나온다. TextView 를 끌어다 놓으면 텍스트를 작성할 수 있다. 끌어다 놓기만 했는데도 코드에 TextView 가 자동으로 생성된 것을 확인할 수 있다. 하지만 이 뷰가 not constrained 되어있다고 에러가 나는데, 그것은 이 TextView에 대한 제약을 아직 걸지 않아서 생기는 오류다. 오른쪽에 있는 Constraint Widget 에서 + 버튼을 모두 더블클릭해서 활성화 시켜주면 에러가 사라진다. 이 값은 상하좌우에 주는 margin 값이다. 화면을 보면 아까 만들었던 글자에 체..

1. if and when fun maxBy(a: Int, b: Int) : Int { if(a > b){ return a } else{ return b } } fun checkNum(score : Int) { when (score) { 0 -> println("this is 0") 1 -> println("this is 1") 2, 3 -> println("this is 2 or 3") else -> println("Idk") } when (score) { in 90..100 -> println("grade A") in 10..80 -> println("grade B") } } 코틀린에서는 when이 if문의 역할을 수행한다. checkNum 함수의 첫번째 when은 파이썬에서 switch ~ case..

1. 안드로이드 스튜디오 설치 안드로이드 스튜디오 공식 홈페이지에 가면 프로그램을 다운받을 수 있다. 다운받고 이것저것 동의 누르다보면 이렇게 알아서 설치를 한다. 그러면 새 프로젝트를 시작할 수 있다. Empty project를 하나 생성하고, sample1.kt 파일을 하나 만든다. .kt 는 코틀린 파일의 확장자이다. 2. 코틀린 문법 알아보기 2-1. 함수 package com.example.myapplication fun main(){ helloworld() } fun helloworld() : Unit{ println("hello world") } hello world 를 출력하는 간단한 코드를 실행해보았다. helloworld 함수 뒤에 Unit을 붙여주는 이유는 저 함수의 리턴값이 void..

1. 모각코? 모각코는 학부에서 진행하는 학습 장려 프로그램으로, '모여서 각자 코딩하기'의 줄임말이다. 나는 현재 학부 소속 웹 개발 동아리에 가입되어있는데, 우리 동아리도 팀을 짜서 모각코에 참여하기로 했다. 이번 2022-2학기에 한 학기동안 장기 해커톤을 진행하는 것도 있어서 이왕 모여서 공부할거 간식까지 주는 모각코에 참여하면 일석이조라고 생각한 것이다. 2. 주제 선정 만나서 아이디어 회의를 한 결과, 내가 낸 아이디어인 물물교환 앱이 채택되었다. 나는 평소에도 중고거래를 자주 하는 사람으로서, 물건의 구매나 판매가 아닌 오직 물물교환을 위한 플랫폼이 있으면 좋겠다는 생각을 종종 했다. 그래서 우리가 개발하려는 앱은 번*장터, 당*마켓과 유사하지만 물건을 교환만 할 수 있다는 차이점이 있다. ..