개발/React.js(18)
-
[React.js] 8. List 와 Key
이전에 StopWatch를 구현해보면서 현재 시간을 list에 저장하는 기능을 넣은적이 있었다. 이때 list에 값을 담고 그대로 출력하니 리스트의 각항목에 대한 key가 필요하다는 Warning 메세지가 떴었다. 2021.07.21 - [개발/React.js] - [React.js] StopWatch 구현하기 [React.js] StopWatch 구현하기 어떤 프로그래밍 언어든 직접 해보지 않으면, 내가 배운것이 다가 아니라는 것을 계속 깨닫게 된다. React 공홈을 통해 배운 것을 하나로 뭉쳐서 뭘 만들 수 있을까 고민해보다가 state, component 등 kwanghyuk.tistory.com 이유는 React.js 자체에서 엘리먼트에 안정적인 고유성을 부여하기 위해 배열내부의 엘리먼트에 지정..
2021.08.02 -
[React.js] 7. 조건부 렌더링
조건부 렌더링이 뭘까 싶었더니 조건에 따라 어떤 Component를 rendering 하느냐의 의미였던것같다. React 자습서의 예시 코드를 보면 쉽게 이해할 수 있었다. function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; ///////////////////// 여기 } return ; ///////////////////// 여기! } ReactDOM.render( // Try changing ..
2021.07.22 -
[React.js] StopWatch 구현하기
어떤 프로그래밍 언어든 직접 해보지 않으면, 내가 배운것이 다가 아니라는 것을 계속 깨닫게 된다. React 공홈을 통해 배운 것을 하나로 뭉쳐서 뭘 만들 수 있을까 고민해보다가 state, component 등을 한눈에 볼 수 있는 stop watch로 정했다. 무엇을 구현할지는 아래와 같이 정했다. 1. Start, Stop 버튼 클릭시 stopwatch 실행, 중단 2. Records 버튼 클릭시 현재 시간 기록 3. Reset 버튼 클릭시 전체 초기화 (시간, records 기록 모두 초기화) 1. html 에 넣을 component를 먼저 구현 2. render 부분에 어떤 것을 넣을지 고민해서 시간을 표시하는 Indicator 부분과 버튼부분, records 부분으로 나누었다. (그리고, 상태..
2021.07.21 -
[React.js] 6. Event
React 공홈에서는 아래와 같은 규칙이 있다고한다. - React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. - JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. html 과 React의 차이를 보면 한번에 알 수 있었다. Activate Lasers Activate Lasers 또한, 태그가 가지는 고유한 기능(?) 을 사용하지 않기위해 아래와 같이 사용하지만, React 에서는 명시적으로 고유한 기능을 쓰지 않을거라고 알려주어야한다. (preventDefault를 사용하면 된다.) Submit // React function Form() { function handleSubmit(e) { e.preventDefault(); console.log('You ..
2021.07.20 -
[React.js] 5. State and Lifecycle
예전에 React-Native앱을 만들 당시 state, lifecycle 과 씨름한 적이 있었는데, 공식문서에서 만나보니 또 새롭다. 다른 형태의 App들도 그렇듯, lifecycle은 꼭 먼저 살펴보고 지나가는 것이 좋았었다. 이전 강좌를 통해 배운 것은 setInterval을 통해 rerendering 하는 방법을 배웠었다. (아래처럼) function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); state 라는 녀석을 사용하게 되면, s..
2021.07.20 -
[React.js] 4. Component와 Props
3장에서는 React를 이루는 가장 작은 단위인 Element에 대해서 알아 봤었다. 이번 4장에서는 재사용이 가능한 Component와 props - 속성(properties) 에 대해서 배울 수 있다. Component를 정의하는 방법1 - Javascript 함수 작성 function Welcome(props) { return Hello, {props.name}; } Component를 정의하는 방법2 - ES6 Class 사용 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 딱 봐도 1번 방법이 생산성면에서 좋아보인다. (간결성이 2번 방법에 비해 좋기때문에) 이렇게 만든 Component..
2021.07.19