리액트 네이티브(React Native)로 할 일 관리앱(To-Do App)을 만들기입니다. 이전 강좌에서 계속 이어지는 내용입니다.
이전 강좌에서 할 일을 새로 추가하는 기능을 구현했습니다. 이번에는 추가된 할 일을 목록 화면에 출력해봅니다.
App.js 수정하기
할일 목록을 출력하기 위해서는 Body 컴포넌트에 state.todos를 넘겨줘야한다. 아래와 같이 App 컴포넌트의 render() 함수를 수정한다.
Body.js 수정하기
Body 클래스의 render() 함수를 수정한다.
render() {
return (
<View style={styles.container}>
{
this.props.todos.map(data => (
<View style={styles.todo} key={data.id}>
부모 컴포넌트로부터 전달받은
props.todos를map한다. 그리고View컴포넌트의key속성에data.id를 입력한다. 컴포넌트를 iterator 할때에는 반드시 key 속성을 입력해야한다.
여기까지 구현한 앱의 동작 화면은 아래와 같다.
앱이 잘 동작되는 화면을 보고나니 뿌듯합니다. 가끔 기획과 디자인, 그리고 코딩까지 다 잘하는 개발자를 꿈꿔봅니다.ㅋ
Sponsored ( Powered by dclick )
실용적인 앱 만들기네요:) 재밌어보입니당ㅎㅎ 디클릭 응원하고 가요~
실용적인 앱 만들기입니다. 디클릭 응원 감사합니드앙~
짱짱맨 호출에 응답하여 보팅하였습니다.
추천! 이 세대의 교양서 「빨간맛 B컬처」. 스팀달러 특별가로 금일부터 스팀달러 에어드랍 프로그램 시작합니다.
기획, 디자인, 코딩까지 다 잘하면 일 복 터지게 들어오겠는데요???ㅎㅎㅎㅎ
3개 다 잘하면 앱개발해서 앱스토어에서 앱을 판매하면 됩니다.ㅎㅎ 앱스토에는 1인 개발자들이 많아요.ㅎㅎ
화이팅하세요 ^^
Posted using Partiko iOS
응원 감사합니다.
앱은 디자인이 생명인 것 같아요.
보면 프로그래머들은 디자인이 약해서 표현력은 높지만 실물의 앱들이 다소 이미지적으로 부족해 보이기도 하고요.
디자인너드이 만든 앱드은 별다른 기능이 없는 코딩도 단순한 표현인데 시각적으로 먹고 들어가서 인지 고퀄리티 앱 같이 보여서 참 코딩 하나만 자한다고 되는 것 아닌 것 같아요.
디자이너 출신 개발자들이 게임이나 앱을 잘 만드는 것 같습니다. 개인이 출시한 앱들을 비교해보면 확연히 차이가 납니다.ㅎㅎ
저는 디자인에 자신이 없기 때문에, 대부분 매우 직관적이고 심플한 UI로 앱을 개발합니다. 그래서 기능도 매우 단순합니다.ㅋ
잘 만든다기 보다는 시각적 효과로 보면 될 듯요.
안녕하세요... 팔로우 보팅 디클릭합니다.
앞으로 좋은 인연되어요.. !!
감사합니다. 스팀잇에서 좋은 인연이 되었네요.ㅎㅎ
Hi @anpigon!
Your UA account score is currently 2.683 which ranks you at #13840 across all Steem accounts.
Your rank has improved 581 places in the last three days (old rank 14421).Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
In our last Algorithmic Curation Round, consisting of 277 contributions, your post is ranked at #104.
Evaluation of your UA score:
Feel free to join our @steem-ua Discord server
@anpigon님 곰돌이가 최대 두배로 보팅해드리고 가요~! 영차~